import * as React from 'react';
import { cn } from '../utils/cn';

export const BackgroundGrid: React.FC = () => (
  <div className="fixed inset-0 pointer-events-none -z-20 opacity-[0.01]" style={{
    backgroundImage: 'linear-gradient(#0f172a 1px, transparent 1px), linear-gradient(90deg, #0f172a 1px, transparent 1px)',
    backgroundSize: '60px 60px'
  }} />
);

interface CardProps {
  children: React.ReactNode;
  className?: string;
  variant?: 'white' | 'dark' | 'gray';
  hover?: boolean;
  padding?: 'none' | 'small' | 'normal' | 'large';
}

export const Card: React.FC<CardProps> = ({ 
  children, 
  className = "", 
  variant = 'white',
  hover = true,
  padding = 'normal'
}) => {
  const variants = {
    white: 'bg-white border-slate-100 text-slate-900 shadow-sm',
    dark: 'bg-slate-900 border-white/5 text-white shadow-xl',
    gray: 'bg-slate-50/50 border-slate-100 text-slate-900'
  };

  const paddings = {
    none: 'p-0',
    small: 'p-6 md:p-8',
    normal: 'p-8 md:p-10',
    large: 'p-10 md:p-12'
  };

  return (
    <div className={cn(
      "rounded-2xl border h-full flex flex-col justify-between transition-all duration-500 ease-out",
      variants[variant],
      paddings[padding],
      hover ? 'hover:border-slate-200 hover:shadow-md' : '',
      className
    )}>
      {children}
    </div>
  );
};

export const Container: React.FC<{ children: React.ReactNode; className?: string; variant?: 'narrow' | 'normal' | 'wide' }> = ({ 
  children, 
  className = "", 
  variant = 'normal' 
}) => {
  const variants = {
    narrow: 'max-w-4xl',
    normal: 'max-w-6xl',
    wide: 'max-w-7xl'
  };

  return (
    <div className={cn("mx-auto px-6 w-full", variants[variant], className)}>
      {children}
    </div>
  );
};
