import { HTMLAttributes, ReactNode } from 'react';
import { cn } from '../lib/cn';

export type CardVariant = 'basic' | 'elevated' | 'outlined' | 'ghost';

export interface CardProps extends HTMLAttributes<HTMLDivElement> {
  variant?: CardVariant;
  children?: ReactNode;
}

const variantClasses: Record<CardVariant, string> = {
  basic: 'bg-surface border border-border',
  elevated: 'bg-surface border border-border shadow-lg',
  outlined: 'bg-transparent border border-dashed border-rule',
  ghost: 'bg-surface-2 border border-transparent',
};

export function Card({ variant = 'basic', className, children, ...rest }: CardProps) {
  return (
    <div
      className={cn('rounded-xl overflow-hidden', variantClasses[variant], className)}
      {...rest}
    >
      {children}
    </div>
  );
}

interface SectionProps extends HTMLAttributes<HTMLDivElement> {
  children?: ReactNode;
}

Card.Header = function CardHeader({ className, children, ...rest }: SectionProps) {
  return (
    <div
      className={cn('px-5 pt-5 pb-3 border-b border-border', className)}
      {...rest}
    >
      {children}
    </div>
  );
};

Card.Body = function CardBody({ className, children, ...rest }: SectionProps) {
  return (
    <div className={cn('px-5 py-5 text-text', className)} {...rest}>
      {children}
    </div>
  );
};

Card.Footer = function CardFooter({ className, children, ...rest }: SectionProps) {
  return (
    <div
      className={cn(
        'px-5 py-3 border-t border-border bg-surface-2 text-sm text-text-2',
        className,
      )}
      {...rest}
    >
      {children}
    </div>
  );
};