import React from 'react';
import { clsx } from 'clsx';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/Card';
import { Separator } from '@/components/ui';

export interface FormSectionProps {
  title: string;
  description?: string;
  children: React.ReactNode;
  collapsible?: boolean;
  defaultCollapsed?: boolean;
  className?: string;
  actions?: React.ReactNode;
}

/**
 * Form section component for grouping related form fields
 */
export const FormSection = ({
  title,
  description,
  children,
  collapsible = false,
  defaultCollapsed = false,
  className,
  actions,
}: FormSectionProps) => {
  const [isCollapsed, setIsCollapsed] = React.useState(defaultCollapsed);

  return (
    <Card className={clsx('mb-6', className)}>
      <CardHeader>
        <div className="flex items-start justify-between">
          <div className="flex-1">
            <CardTitle>{title}</CardTitle>
            {description && <CardDescription className="mt-1">{description}</CardDescription>}
          </div>
          {actions && <div className="ml-4">{actions}</div>}
        </div>
      </CardHeader>
      {!isCollapsed && (
        <>
          <Separator />
          <CardContent className="pt-6">
            <div className="space-y-4">{children}</div>
          </CardContent>
        </>
      )}
    </Card>
  );
};