import { ReactNode } from 'react';
import { defaultLayoutConfig, type LayoutConfig } from '~/lib/layout-utils';

interface CardProps {
  children: ReactNode;
  className?: string;
  config?: Partial<LayoutConfig>;
  padding?: 'none' | 'sm' | 'md' | 'lg';
  shadow?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl';
  border?: boolean;
  hover?: boolean;
}

export function Card({ 
  children, 
  className = '', 
  config = {},
  padding = 'md',
  shadow = 'md',
  rounded = 'lg',
  border = true,
  hover = false
}: CardProps) {
  const layoutConfig = { ...defaultLayoutConfig, ...config };
  
  const paddingClasses = {
    none: '',
    sm: 'p-3',
    md: 'p-4 sm:p-6',
    lg: 'p-6 sm:p-8',
  };
  
  const shadowClasses = {
    none: '',
    sm: 'shadow-sm',
    md: 'shadow-md',
    lg: 'shadow-lg',
    xl: 'shadow-xl',
  };
  
  const roundedClasses = {
    none: '',
    sm: 'rounded-sm',
    md: 'rounded-md',
    lg: 'rounded-lg',
    xl: 'rounded-xl',
  };
  
  const borderClass = border ? 'border border-gray-200' : '';
  const hoverClass = hover ? 'hover:shadow-lg transition-shadow duration-200' : '';
  
  return (
    <div 
      className={`bg-white ${paddingClasses[padding]} ${shadowClasses[shadow]} ${roundedClasses[rounded]} ${borderClass} ${hoverClass} ${className}`}
      dir={layoutConfig.direction}
    >
      {children}
    </div>
  );
}

interface CardHeaderProps {
  children: ReactNode;
  className?: string;
  config?: Partial<LayoutConfig>;
}

export function CardHeader({ children, className = '', config = {} }: CardHeaderProps) {
  const layoutConfig = { ...defaultLayoutConfig, ...config };
  
  return (
    <div 
      className={`border-b border-gray-200 pb-4 mb-4 ${className}`}
      dir={layoutConfig.direction}
    >
      {children}
    </div>
  );
}

interface CardBodyProps {
  children: ReactNode;
  className?: string;
  config?: Partial<LayoutConfig>;
}

export function CardBody({ children, className = '', config = {} }: CardBodyProps) {
  const layoutConfig = { ...defaultLayoutConfig, ...config };
  
  return (
    <div 
      className={className}
      dir={layoutConfig.direction}
    >
      {children}
    </div>
  );
}

interface CardFooterProps {
  children: ReactNode;
  className?: string;
  config?: Partial<LayoutConfig>;
}

export function CardFooter({ children, className = '', config = {} }: CardFooterProps) {
  const layoutConfig = { ...defaultLayoutConfig, ...config };
  
  return (
    <div 
      className={`border-t border-gray-200 pt-4 mt-4 ${className}`}
      dir={layoutConfig.direction}
    >
      {children}
    </div>
  );
}