---
import type { HTMLAttributes } from 'astro/types';
import { cn } from '@/lib/cn';
import { cardVariants } from './card.variants';

interface Props extends HTMLAttributes<'div'>, Pick<HTMLAttributes<'a'>, 'target' | 'rel'> {
  variant?: 'default' | 'solid' | 'outline' | 'ghost' | 'elevated';
  padding?: 'none' | 'sm' | 'md' | 'lg';
  hover?: boolean;
  href?: string;
}

const {
  variant = 'default',
  padding = 'md',
  hover = false,
  href,
  class: className,
  ...attrs
} = Astro.props;

const Element = href ? 'a' : 'div';

const cardStyles = cn(
  cardVariants({ variant, padding, hover }),
  href && 'block cursor-pointer',
  className
);
---

<Element class={cardStyles} href={href} {...attrs}>
  <slot />
</Element>
