import { ChevronDown, ChevronUp } from 'lucide-react';
import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@/components/ui/collapsible';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';

interface DetailedViewCollapsibleProps {
  isCollapsed: boolean;
  onToggle: () => void;
  children: React.ReactNode;
  className?: string;
}

/**
 * Collapsible wrapper for detailed field-by-field view sections
 * Provides expand/collapse functionality with visual indicators
 */
export function DetailedViewCollapsible({
  isCollapsed,
  onToggle,
  children,
  className
}: DetailedViewCollapsibleProps) {
  return (
    <Collapsible open={!isCollapsed} onOpenChange={() => onToggle()}>
      <div className={cn("mt-6 pt-6 border-t", className)}>
        <CollapsibleTrigger asChild>
          <Button
            variant="ghost"
            size="sm"
            className="w-full flex items-center justify-between hover:bg-muted/50 p-2 h-auto"
          >
            <div className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
              All Fields (Detailed View)
            </div>
            <div className="flex items-center gap-2">
              <span className="text-xs text-muted-foreground normal-case font-normal">
                {isCollapsed ? 'Show' : 'Hide'}
              </span>
              {isCollapsed ? (
                <ChevronDown className="h-4 w-4 text-muted-foreground" />
              ) : (
                <ChevronUp className="h-4 w-4 text-muted-foreground" />
              )}
            </div>
          </Button>
        </CollapsibleTrigger>
        
        <CollapsibleContent className="mt-3">
          {children}
        </CollapsibleContent>
      </div>
    </Collapsible>
  );
}