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

const cardVariants = {
  base: 'bg-white rounded-lg shadow-sm border border-neutral-200 transition-shadow hover:shadow-md',
  padding: {
    none: '',
    sm: 'p-4',
    md: 'p-6',
    lg: 'p-8',
  },
  interactive: 'cursor-pointer hover:border-primary-200',
};

export function Card({
  className,
  padding = 'md',
  interactive = false,
  children,
  ...props
}) {
  return (
    <div
      className={cn(
        cardVariants.base,
        cardVariants.padding[padding],
        interactive && cardVariants.interactive,
        className
      )}
      {...props}
    >
      {children}
    </div>
  );
}

export function CardHeader({ className, children, ...props }) {
  return (
    <div
      className={cn('flex items-center justify-between mb-4', className)}
      {...props}
    >
      {children}
    </div>
  );
}

export function CardTitle({ className, children, ...props }) {
  return (
    <h3
      className={cn('text-lg font-semibold text-neutral-900', className)}
      {...props}
    >
      {children}
    </h3>
  );
}

export function CardContent({ className, children, ...props }) {
  return (
    <div className={cn('space-y-4', className)} {...props}>
      {children}
    </div>
  );
}

export function CardFooter({ className, children, ...props }) {
  return (
    <div
      className={cn('flex items-center justify-end gap-x-4 mt-6', className)}
      {...props}
    >
      {children}
    </div>
  );
} 