mediahub-fe/components/form/shared/form-section.tsx

/**
 * FormSection Component
 * 
 * A reusable form section component that:
 * - Groups related form fields
 * - Provides consistent section headers
 * - Handles section styling and spacing
 * - Supports collapsible sections
 * 
 * This component improves form organization and readability.
 */

import React, { useState } from 'react';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { ChevronDown, ChevronRight } from 'lucide-react';
import { cn } from '@/lib/utils';

// =============================================================================
// TYPES
// =============================================================================

export interface FormSectionProps {
  // Section configuration
  title?: string;
  description?: string;
  collapsible?: boolean;
  defaultExpanded?: boolean;
  
  // Styling
  className?: string;
  headerClassName?: string;
  contentClassName?: string;
  titleClassName?: string;
  descriptionClassName?: string;
  
  // Layout
  variant?: 'default' | 'bordered' | 'minimal';
  spacing?: 'sm' | 'md' | 'lg';
  
  // Actions
  actions?: React.ReactNode;
  
  // Children
  children: React.ReactNode;
}

// =============================================================================
// COMPONENT
// =============================================================================

export function FormSection({
  title,
  description,
  collapsible = false,
  defaultExpanded = true,
  className = '',
  headerClassName = '',
  contentClassName = '',
  titleClassName = '',
  descriptionClassName = '',
  variant = 'default',
  spacing = 'md',
  actions,
  children,
}: FormSectionProps) {
  
  // =============================================================================
  // STATE
  // =============================================================================
  
  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
  
  // =============================================================================
  // HELPER FUNCTIONS
  // =============================================================================
  
  const getSpacing = (spacing: 'sm' | 'md' | 'lg') => {
    switch (spacing) {
      case 'sm':
        return 'space-y-3';
      case 'lg':
        return 'space-y-6';
      default:
        return 'space-y-4';
    }
  };
  
  const getVariantStyles = (variant: 'default' | 'bordered' | 'minimal') => {
    switch (variant) {
      case 'bordered':
        return 'border border-border rounded-lg p-4';
      case 'minimal':
        return '';
      default:
        return 'bg-card rounded-lg p-4 shadow-sm';
    }
  };
  
  // =============================================================================
  // RENDER FUNCTIONS
  // =============================================================================
  
  const renderHeader = () => {
    if (!title && !description && !actions) return null;
    
    return (
      <div className={cn('flex items-start justify-between', headerClassName)}>
        <div className="flex-1">
          {title && (
            <div className="flex items-center gap-2">
              {collapsible && (
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => setIsExpanded(!isExpanded)}
                  className="h-6 w-6 p-0"
                >
                  {isExpanded ? (
                    <ChevronDown className="h-4 w-4" />
                  ) : (
                    <ChevronRight className="h-4 w-4" />
                  )}
                </Button>
              )}
              
              <h3 className={cn(
                'text-lg font-semibold leading-none tracking-tight',
                titleClassName
              )}>
                {title}
              </h3>
            </div>
          )}
          
          {description && (
            <p className={cn(
              'mt-1 text-sm text-muted-foreground',
              descriptionClassName
            )}>
              {description}
            </p>
          )}
        </div>
        
        {actions && (
          <div className="flex items-center gap-2">
            {actions}
          </div>
        )}
      </div>
    );
  };
  
  const renderContent = () => {
    if (collapsible && !isExpanded) return null;
    
    return (
      <div className={cn(getSpacing(spacing), contentClassName)}>
        {children}
      </div>
    );
  };
  
  // =============================================================================
  // MAIN RENDER
  // =============================================================================
  
  const sectionContent = (
    <div className={cn(getVariantStyles(variant), className)}>
      {renderHeader()}
      {renderContent()}
    </div>
  );
  
  // Wrap in Card for default variant
  if (variant === 'default') {
    return <Card className="p-0">{sectionContent}</Card>;
  }
  
  return sectionContent;
}

export default FormSection;