import { cva } from "../lib/cva";
import { getMotionRecipeClassNames } from "../lib/motion";

export const cardVariants = cva(
  [
    "rounded-[var(--ui-card-radius)] border text-[var(--color-card-foreground)]",
    "bg-[var(--ui-card-bg)] shadow-[var(--ui-card-shadow)] [border-width:var(--ui-card-border-width)]",
    getMotionRecipeClassNames("transition", "ring")
  ],
  {
    variants: {
      tone: {
        default:
          "border-[var(--ui-card-default-border)] bg-[var(--ui-card-default-bg)] shadow-[var(--ui-card-default-shadow)]",
        subtle:
          "border-[var(--ui-card-subtle-border)] bg-[var(--ui-card-subtle-bg)] shadow-[var(--ui-card-subtle-shadow)]",
        accent:
          "border-[var(--ui-card-accent-border)] bg-[var(--ui-card-accent-bg)] shadow-[var(--ui-card-accent-shadow)]"
      },
      interactive: {
        false: "",
        true: "hover:translate-y-[var(--ui-card-hover-translate)] hover:shadow-[var(--ui-card-hover-shadow)]"
      }
    },
    defaultVariants: {
      tone: "default",
      interactive: false
    }
  }
);

export const cardHeaderVariants = cva("grid gap-2 p-6 pb-0");

export const cardTitleVariants = cva(
  "text-lg font-semibold tracking-[var(--tracking-tight)] text-[var(--color-foreground)]"
);

export const cardDescriptionVariants = cva(
  "text-sm leading-6 text-[var(--color-muted-foreground)]"
);

export const cardContentVariants = cva("p-6");

export const cardFooterVariants = cva("flex flex-wrap items-center gap-3 p-6 pt-0");