import * as React from 'react';

import { cn } from '@workspace/ui/lib/utils';

// Container component for consistent horizontal padding and optional max-width centering
export function Container({
  children,
  className,
  maxWidth = '7xl', // Tailwind max-width class prefix (e.g., '7xl' for max-w-7xl)
  ...props
}: React.HTMLAttributes<HTMLDivElement> & { maxWidth?: string }) {
  return (
    <div
      className={cn('w-full mx-auto px-4 md:px-6', maxWidth && `max-w-${maxWidth}`, className)}
      {...props}
    >
      {children}
    </div>
  );
}

// Section component for vertical spacing and optional background/border
export function Section({
  children,
  className,
  id,
  background = 'default', // 'default', 'muted', 'card' - maps to bg-* classes
  padding = 'default', // 'default', 'sm', 'lg', 'xl', 'none'
  border = false, // Adds a top border
  ...props
}: React.HTMLAttributes<HTMLElement> & {
  background?: 'default' | 'muted' | 'card';
  padding?: 'default' | 'sm' | 'lg' | 'xl' | 'none';
  border?: boolean;
}) {
  const backgroundClass = background === 'muted' ? 'bg-muted' : background === 'card' ? 'bg-card' : '';
  const borderClass = border ? 'border-t' : '';
  
  const paddingClasses = {
    'default': 'py-12 md:py-20',
    'sm': 'py-6 md:py-10',
    'lg': 'py-16 md:py-24',
    'xl': 'py-20 md:py-32',
    'none': '',
  };
  const paddingClass = paddingClasses[padding] || paddingClasses['default'];

  return (
    <section
      id={id}
      className={cn(paddingClass, backgroundClass, borderClass, className)}
      {...props}
    >
      {children}
    </section>
  );
}

// Grid component for consistent grid layouts
// Uses CSS Grid with responsive columns
export function Grid({
  children,
  className,
  columns = {
    initial: 1, // Number of columns on smallest screens
    sm: undefined, // Optional breakpoint
    md: undefined, // Optional breakpoint
    lg: undefined, // Optional breakpoint
    xl: undefined, // Optional breakpoint
  },
  gap = '6', // Tailwind gap size (e.g., '4', '6', '8')
  ...props
}: React.HTMLAttributes<HTMLDivElement> & {
  columns?: {
    initial?: number;
    sm?: number;
    md?: number;
    lg?: number;
    xl?: number;
  };
  gap?: string; // Tailwind gap class suffix (e.g., '4' for gap-4)
}) {
  const columnClasses = [];
  if (columns.initial) columnClasses.push(`grid-cols-${columns.initial}`);
  if (columns.sm) columnClasses.push(`sm:grid-cols-${columns.sm}`);
  if (columns.md) columnClasses.push(`md:grid-cols-${columns.md}`);
  if (columns.lg) columnClasses.push(`lg:grid-cols-${columns.lg}`);
  if (columns.xl) columnClasses.push(`xl:grid-cols-${columns.xl}`);

  return (
    <div
      className={cn('grid', columnClasses.join(' '), gap && `gap-${gap}`, className)}
      {...props}
    >
      {children}
    </div>
  );
}