klz-cables.com/components/content/Section.tsx

import React from 'react';
import { cn } from '../../lib/utils';
import { Container } from '../ui/Container';

// Section background options
type SectionBackground = 'default' | 'light' | 'dark' | 'primary' | 'secondary' | 'gradient';

// Section padding options
type SectionPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';

interface SectionProps {
  children: React.ReactNode;
  background?: SectionBackground;
  padding?: SectionPadding;
  fullWidth?: boolean;
  className?: string;
  id?: string;
  as?: React.ElementType;
}

// Helper function to get background styles
const getBackgroundStyles = (background: SectionBackground) => {
  switch (background) {
    case 'light':
      return 'bg-gray-50';
    case 'dark':
      return 'bg-gray-900 text-white';
    case 'primary':
      return 'bg-primary text-white';
    case 'secondary':
      return 'bg-secondary text-white';
    case 'gradient':
      return 'bg-gradient-to-br from-primary to-secondary text-white';
    default:
      return 'bg-white';
  }
};

// Helper function to get padding styles
const getPaddingStyles = (padding: SectionPadding) => {
  switch (padding) {
    case 'none':
      return 'py-0';
    case 'sm':
      return 'py-4 sm:py-6';
    case 'md':
      return 'py-8 sm:py-12';
    case 'lg':
      return 'py-12 sm:py-16';
    case 'xl':
      return 'py-16 sm:py-20 md:py-24';
    case '2xl':
      return 'py-20 sm:py-24 md:py-32';
    default:
      return 'py-12 sm:py-16';
  }
};

export const Section: React.FC<SectionProps> = ({
  children,
  background = 'default',
  padding = 'md',
  fullWidth = false,
  className = '',
  id,
  as: Component = 'section',
}) => {
  const sectionClasses = cn(
    'w-full',
    getBackgroundStyles(background),
    getPaddingStyles(padding),
    className
  );

  const content = fullWidth ? (
    <div className={sectionClasses} id={id}>
      {children}
    </div>
  ) : (
    <section className={sectionClasses} id={id}>
      <Container maxWidth="6xl" padding="md">
        {children}
      </Container>
    </section>
  );

  if (Component !== 'section' && !fullWidth) {
    return (
      <Component className={sectionClasses} id={id}>
        <Container maxWidth="6xl" padding="md">
          {children}
        </Container>
      </Component>
    );
  }

  return content;
};

// Sub-components for common section patterns
export const SectionHeader: React.FC<{
  title: string;
  subtitle?: string;
  align?: 'left' | 'center' | 'right';
  className?: string;
}> = ({ title, subtitle, align = 'center', className = '' }) => {
  const alignment = {
    left: 'text-left',
    center: 'text-center',
    right: 'text-right',
  }[align];

  return (
    <div className={cn('mb-8 md:mb-12', alignment, className)}>
      <h2 className={cn(
        'text-3xl md:text-4xl font-bold mb-3',
        'leading-tight tracking-tight'
      )}>
        {title}
      </h2>
      {subtitle && (
        <p className={cn(
          'text-lg md:text-xl',
          'max-w-3xl mx-auto',
          'opacity-90'
        )}>
          {subtitle}
        </p>
      )}
    </div>
  );
};

export const SectionContent: React.FC<{
  children: React.ReactNode;
  className?: string;
}> = ({ children, className = '' }) => (
  <div className={cn('space-y-6 md:space-y-8', className)}>
    {children}
  </div>
);

export const SectionGrid: React.FC<{
  children: React.ReactNode;
  cols?: 1 | 2 | 3 | 4;
  gap?: 'sm' | 'md' | 'lg' | 'xl';
  className?: string;
}> = ({ children, cols = 3, gap = 'md', className = '' }) => {
  const gapClasses = {
    sm: 'gap-4 md:gap-6',
    md: 'gap-6 md:gap-8',
    lg: 'gap-8 md:gap-12',
    xl: 'gap-10 md:gap-16',
  }[gap];

  const colClasses = {
    1: 'grid-cols-1',
    2: 'grid-cols-1 md:grid-cols-2',
    3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
    4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
  }[cols];

  return (
    <div className={cn('grid', colClasses, gapClasses, className)}>
      {children}
    </div>
  );
};

export default Section;