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

export const alertVariants = cva(
  [
    "relative grid gap-x-3 gap-y-1 rounded-[var(--ui-card-radius)] border p-4 shadow-[var(--ui-card-subtle-shadow)] [border-width:var(--ui-card-border-width)]",
    "text-[var(--color-foreground)]",
    getMotionRecipeClassNames("transition", "ring")
  ],
  {
    variants: {
      variant: {
        default:
          "border-[var(--ui-card-default-border)] bg-[var(--ui-card-default-bg)]",
        success:
          "border-[color-mix(in_oklch,var(--color-success)_34%,var(--ui-card-default-border))] bg-[color-mix(in_oklch,var(--color-success)_10%,var(--ui-card-default-bg))]",
        warning:
          "border-[color-mix(in_oklch,var(--color-warning)_34%,var(--ui-card-default-border))] bg-[color-mix(in_oklch,var(--color-warning)_12%,var(--ui-card-default-bg))]",
        destructive:
          "border-[color-mix(in_oklch,var(--color-destructive)_38%,var(--ui-card-default-border))] bg-[color-mix(in_oklch,var(--color-destructive)_10%,var(--ui-card-default-bg))]"
      },
      hasIcon: {
        false: "",
        true: "grid-cols-[auto_1fr]"
      }
    },
    defaultVariants: {
      variant: "default",
      hasIcon: false
    }
  }
);

export const alertIconVariants = cva(
  "row-span-2 mt-0.5 inline-flex size-5 items-center justify-center rounded-[var(--radius-full)] text-[var(--color-muted-foreground)]"
);

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

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