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

type Props = HTMLAttributes<"div">;

export const cardTitle = tv({
  base: "font-heading text-xl leading-snug font-medium group-data-[size=sm]/card:text-base",
});

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

<div class={cardTitle({ class: className })} data-slot="card-title" {...rest}>
  <slot />
</div>
