import { cn } from "@/lib/utils"

type Props = {
  title?: React.ReactNode
  description?: React.ReactNode
  actions?: React.ReactNode
  icon?: React.ReactNode
  children: React.ReactNode
  className?: string
  bodyClassName?: string
  footer?: React.ReactNode
  padded?: boolean
}

export function SectionCard({
  title,
  description,
  actions,
  icon,
  children,
  className,
  bodyClassName,
  footer,
  padded = true,
}: Props) {
  return (
    <section className={cn("rounded-xl border border-border bg-card overflow-hidden", className)}>
      {(title || actions) && (
        <header className="flex items-center justify-between gap-3 px-5 py-4 border-b border-border">
          <div className="flex items-center gap-2.5 min-w-0">
            {icon}
            <div className="min-w-0">
              {title && <h3 className="text-[14.5px] font-semibold text-foreground truncate">{title}</h3>}
              {description && (
                <p className="text-[12px] text-muted-foreground truncate">{description}</p>
              )}
            </div>
          </div>
          {actions && <div className="flex items-center gap-2 shrink-0">{actions}</div>}
        </header>
      )}
      <div className={cn(padded && "p-5", bodyClassName)}>{children}</div>
      {footer && <div className="px-5 py-3 border-t border-border bg-muted/30">{footer}</div>}
    </section>
  )
}
