import { type ReactNode, useState } from 'react'
import { ChevronDown } from 'lucide-react'
import { Card, CardContent, CardTitle } from '@/shared/ui/card'

/** Карточка со сворачиваемым содержимым: клик по заголовку скрывает/раскрывает блок. */
export function CollapsibleCard({
  title,
  defaultOpen = false,
  bare = false,
  contentClassName,
  children,
}: Readonly<{
  title: string
  defaultOpen?: boolean
  /** Без своего заголовка и сворачивания — когда карточка и так лежит во вкладке с этим названием. */
  bare?: boolean
  contentClassName?: string
  children: ReactNode
}>) {
  const [open, setOpen] = useState(defaultOpen)

  if (bare)
    return (
      <Card>
        <CardContent className={contentClassName}>{children}</CardContent>
      </Card>
    )

  return (
    <Card>
      <button
        type="button"
        onClick={() => setOpen((o) => !o)}
        aria-expanded={open}
        className="flex w-full items-center justify-between gap-2 p-6 text-left"
      >
        <CardTitle>{title}</CardTitle>
        <ChevronDown
          className={`h-5 w-5 shrink-0 text-muted-foreground transition-transform ${open ? 'rotate-180' : ''}`}
        />
      </button>
      {open && <CardContent className={contentClassName}>{children}</CardContent>}
    </Card>
  )
}
