---
import type { HTMLAttributes } from "astro/types";
import { tv, type VariantProps } from "tailwind-variants";

type Props = HTMLAttributes<"div"> & VariantProps<typeof card>;

export const card = tv({
  base: [
    "bg-card text-card-foreground group/card ring-border flex flex-col rounded-xl ring-1",
    "has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0",
    "*:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl",
  ],
  variants: {
    size: {
      default: "gap-6 py-6",
      sm: "gap-4 py-4 text-sm",
    },
  },
  defaultVariants: {
    size: "default",
  },
});

const { class: className, size, ...rest } = Astro.props;
---

<div
  class={card({ size, class: className })}
  data-slot="card"
  data-size={size ?? "default"}
  {...rest}
>
  <slot />
</div>
