'use client';

/**
 * Three Column Layout - Core Wireframe Component
 *
 * Provides a consistent three-column layout structure used across the application.
 * This is the single source of truth for column widths, breakpoints, and responsive behavior.
 *
 * Column Structure:
 * - Left: w-64 (256px), hidden until lg breakpoint
 * - Center: flex-1 (flexible, takes remaining space)
 * - Right: w-56 (224px), hidden until xl breakpoint
 *
 * Usage Examples:
 *
 * 1. SubsectionNav (3 columns):
 * <ThreeColumnLayout
 *   left={<Logo />}
 *   center={<NavItems />}
 *   right={<UserMenu />}
 * />
 *
 * 2. Docs Layout (2 columns - left + center):
 * <ThreeColumnLayout
 *   left={<DocsSidebar />}
 *   center={<DocPage />}
 * />
 *
 * 3. Doc Page (2 columns - center + right):
 * <ThreeColumnLayout
 *   center={<Article />}
 *   right={<DocsTOC />}
 * />
 *
 * Design Principles:
 * - Responsive breakpoints match Tailwind defaults (lg: 1024px, xl: 1280px)
 * - Column widths ensure visual alignment across all usage contexts
 * - Flexible center column adapts to available space
 * - Optional columns enable 1, 2, or 3 column layouts
 */

/**
 * Props for ThreeColumnLayout component
 */
export interface ThreeColumnLayoutProps {
  /** Left column content (w-64, hidden until lg breakpoint) */
  left?: React.ReactNode;

  /** Center column content (flex-1, always visible) */
  center: React.ReactNode;

  /** Right column content (w-56, hidden until xl breakpoint) */
  right?: React.ReactNode;

  /** Additional classes for left column */
  leftClassName?: string;

  /** Additional classes for center column */
  centerClassName?: string;

  /** Additional classes for right column */
  rightClassName?: string;

  /** Additional classes for container */
  containerClassName?: string;

  /** Breakpoint for showing left column (default: 'lg') */
  leftBreakpoint?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';

  /** Breakpoint for showing right column (default: 'xl') */
  rightBreakpoint?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
}

/**
 * Three Column Layout Component
 *
 * Core wireframe for consistent three-column layouts across the application.
 * Handles responsive behavior and provides customization via className props.
 */
export const ThreeColumnLayout = ({
  left,
  center,
  right,
  leftClassName = '',
  centerClassName = '',
  rightClassName = '',
  containerClassName = '',
  leftBreakpoint = 'lg',
  rightBreakpoint = 'xl',
}: ThreeColumnLayoutProps) => {
  // Generate responsive visibility classes
  const leftHidden = `hidden ${leftBreakpoint}:block`;
  const rightHidden = `hidden ${rightBreakpoint}:block`;

  return (
    <div className={`flex ${containerClassName}`}>
      {/* Left Column - w-64 (256px) */}
      {left && (
        <div className={`${leftHidden} w-64 shrink-0 ${leftClassName}`}>
          {left}
        </div>
      )}

      {/* Center Column - flex-1 (flexible) */}
      <div className={`flex-1 min-w-0 ${centerClassName}`}>
        {center}
      </div>

      {/* Right Column - w-56 (224px) */}
      {right && (
        <div className={`${rightHidden} w-56 shrink-0 ${rightClassName}`}>
          {right}
        </div>
      )}
    </div>
  );
};
