"use client";

import * as React from "react";
import { cn } from "@/lib/utils";
import { ChevronDown, ChevronUp } from "lucide-react";

interface SectionCardProps {
  title: string;
  description?: string;
  children: React.ReactNode;
  className?: string;
  collapsible?: boolean;
  defaultOpen?: boolean;
  action?: React.ReactNode;
}

export function SectionCard({
  title,
  description,
  children,
  className,
  collapsible = false,
  defaultOpen = true,
  action,
}: SectionCardProps) {
  const [isOpen, setIsOpen] = React.useState(defaultOpen);

  if (!collapsible) {
    return (
      <div className={cn("rounded-2xl border border-border bg-card", className)}>
        <div className="flex items-start justify-between gap-4 p-4 sm:p-6 border-b border-border">
          <div className="flex-1 min-w-0">
            <h2 className="text-lg font-semibold text-foreground">{title}</h2>
            {description && (
              <p className="mt-1 text-sm text-muted-foreground">{description}</p>
            )}
          </div>
          {action && <div className="flex-shrink-0">{action}</div>}
        </div>
        <div className="p-4 sm:p-6">{children}</div>
      </div>
    );
  }

  return (
    <div className={cn("rounded-2xl border border-border bg-card", className)}>
      <button
        type="button"
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-start justify-between gap-4 w-full p-4 sm:p-6 border-b border-border text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
      >
        <div className="flex-1 min-w-0">
          <h2 className="text-lg font-semibold text-foreground">{title}</h2>
          {description && (
            <p className="mt-1 text-sm text-muted-foreground">{description}</p>
          )}
        </div>
        <div className="flex items-center gap-2 flex-shrink-0">
          {action}
          {isOpen ? (
            <ChevronUp className="h-4 w-4 text-muted-foreground transition-transform" />
          ) : (
            <ChevronDown className="h-4 w-4 text-muted-foreground transition-transform" />
          )}
        </div>
      </button>
      {isOpen && (
        <div className="p-4 sm:p-6 animate-in slide-in-from-top-2 duration-200">
          {children}
        </div>
      )}
    </div>
  );
}