import { ReactNode } from 'react';

interface CardProps {
  children: ReactNode;
  className?: string;
  onClick?: () => void;
  variant?: 'default' | 'elevated' | 'glass';
  padding?: 'none' | 'sm' | 'md' | 'lg';
  hover?: boolean;
}

export function Card({
  children,
  className = '',
  onClick,
  variant = 'default',
  padding = 'none',
  hover = true,
}: CardProps) {
  const variants = {
    default: `
      bg-[var(--color-surface)]
      border border-[var(--glass-border)]
    `,
    elevated: `
      bg-[var(--color-surface-elevated)]
      border border-[var(--glass-border)]
      shadow-lg shadow-black/20
    `,
    glass: `
      glass
    `,
  };

  const paddings = {
    none: '',
    sm: 'p-3',
    md: 'p-4',
    lg: 'p-6',
  };

  const interactiveStyles = onClick && hover
    ? `
      cursor-pointer
      transition-all duration-300 ease-out
      hover:bg-[var(--color-surface-elevated)]
      hover:border-[var(--color-text-muted)]/20
      hover:shadow-lg hover:shadow-black/30
      hover:-translate-y-0.5
      active:translate-y-0
    `
    : '';

  return (
    <div
      onClick={onClick}
      className={`
        rounded-2xl overflow-hidden
        ${variants[variant]}
        ${paddings[padding]}
        ${interactiveStyles}
        ${className}
      `}
    >
      {children}
    </div>
  );
}
