import type { HTMLAttributes } from 'react';
import { cva, VariantProps } from 'class-variance-authority';

import './card.css';

type CardStylesProps = VariantProps<typeof cardStyles>;
const cardStyles = cva('c-card', {
  variants: {
    variant: {
      default: 'c-card',
      elevate: 'c-card-elevate',
    },
  },
  defaultVariants: {
    variant: 'default',
  },
});

type CardProps = HTMLAttributes<HTMLDivElement> & CardStylesProps;

export function Card({ children, className, variant, ...delegated }: CardProps) {
  return (
    <section className={cardStyles({ variant, className })} {...delegated}>
      {children}
    </section>
  );
}
