import React from 'react';
import { cva, type VariantProps } from 'class-variance-authority';
import { clsx } from 'clsx';
import { componentVariants, themeColors } from '@/lib/theme';

const cardVariants = cva(
  `rounded-lg border ${themeColors.background.card} ${themeColors.text.default} shadow-md transition-all`,
  {
    variants: {
      variant: {
        default: '',
        interactive: componentVariants.card.interactive,
      },
    },
    defaultVariants: {
      variant: 'default',
    },
  }
);

export interface CardProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof cardVariants> {
  as?: React.ElementType;
}

const Card = React.forwardRef<HTMLDivElement, CardProps>(
  ({ className, variant, as: Comp = 'div', ...props }, ref) => {
    return <Comp ref={ref} className={clsx(cardVariants({ variant, className }))} {...props} />;
  }
);
Card.displayName = 'Card';

export const CardHeader = ({ children, className = '' }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={`flex flex-col space-y-1.5 p-6 ${className}`}>{children}</div>
);

export const CardTitle = ({ children, className = '' }: React.HTMLAttributes<HTMLDivElement>) => (
  <h3 className={`text-xl font-semibold ${className}`}>{children}</h3>
);

export const CardContent = ({ children, className = '' }: React.HTMLAttributes<HTMLDivElement>) => (
  <div className={`p-6 pt-0 ${className}`}>{children}</div>
);

export { Card, cardVariants };