---
import type { HTMLAttributes } from "astro/types";
import { VariantProps, cva } from "class-variance-authority";

const card = cva(
    "rounded-card transition-colors bg-neutral-accent ring-2 ring-main/10",
    {
        variants: {
            interactable: {
                false: "transition-shadow focus-within:shadow-lg ring-2 ring-neutral",
                true: "cursor-pointer shadow-sm hocus:bg-neutral-accent/50 \
        hocus:shadow-lg hocus:ring-2 hocus:outline-none",
            },
            padding: {
                true: "p-card",
                false: "p-0",
            },
        },
    }
);

export interface Props
    extends HTMLAttributes<"div">,
        VariantProps<typeof card> {}

const {
    interactable = false,
    padding = true,
    class: _class,
    ...props
} = Astro.props;
---

<div {...props} class={card({ interactable, padding, class: _class })}>
    <slot />
</div>