"use client"

import { useState } from "react"
import { Button } from "../ui/button";

export function CollapsibleSection({ children, text }: { children: React.ReactNode, text: string }) {
  const [collapsed, setCollapsed] = useState(true);

  return collapsed ? (
    <div className="cursor-pointer select-none" onClick={() => setCollapsed(false)}>
      <div className="flex flex-row items-center">
        <div className="flex flex-grow h-[1px] bg-slate-200 mx-4" />
        <span className="flex-shrink text-slate-500">{text}</span>
        <div className="flex flex-grow h-[1px] bg-slate-200 mx-4" />
      </div>
    </div>
  ) : (
    <div className="p-4 border-solid border-slate-200 border-[1px] rounded-lg bg-slate-50">
      <Button variant="outline" className="mb-4" onClick={() => setCollapsed(true)}>Close</Button>
      {children}
    </div>
  );
}