import { type HTMLAttributes, type Ref } from 'react';
import { cardVariants, type CardVariant } from '@lib/theme/variants';

interface CardProps extends HTMLAttributes<HTMLDivElement> {
  ref?: Ref<HTMLDivElement>;
  variant?: CardVariant;
}

interface CardTitleProps extends HTMLAttributes<HTMLHeadingElement> {
  ref?: Ref<HTMLHeadingElement>;
}

export function Card({ className = '', ref, variant = 'elevated', ...props }: CardProps) {
  return (
    <div
      ref={ref}
      className={`${cardVariants({ variant })} ${className}`}
      {...props}
    />
  );
}

export function CardHeader({ className = '', ref, ...props }: Omit<CardProps, 'variant'>) {
  return <div ref={ref} className={`flex flex-col space-y-1.5 p-4 ${className}`} {...props} />;
}

export function CardTitle({ className = '', ref, ...props }: CardTitleProps) {
  return (
    <h3
      ref={ref}
      className={`text-sm font-semibold leading-none tracking-tight text-heading ${className}`}
      {...props}
    />
  );
}

export function CardContent({ className = '', ref, ...props }: Omit<CardProps, 'variant'>) {
  return <div ref={ref} className={`p-4 pt-0 ${className}`} {...props} />;
}
