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

export const commandVariants = cva([
  "flex h-full w-full flex-col overflow-hidden rounded-[var(--ui-panel-radius)] border border-[var(--ui-panel-border)]",
  "bg-[var(--ui-panel-bg)] text-[var(--color-card-foreground)] shadow-[var(--ui-panel-shadow)] [border-width:var(--ui-panel-border-width)] backdrop-blur-[var(--ui-panel-backdrop-blur)]",
  getMotionRecipeClassNames("transition", "ring")
]);

export const commandDialogContentVariants = cva([
  "gap-0 overflow-hidden p-0 sm:max-w-[40rem]",
  "[&>[data-slot=root]]:rounded-none [&>[data-slot=root]]:border-none [&>[data-slot=root]]:shadow-none"
]);

export const commandInputWrapperVariants = cva([
  "flex items-center gap-3 border-b border-[var(--ui-panel-border)] px-4"
]);

export const commandInputVariants = cva([
  "flex h-12 w-full bg-transparent text-sm outline-none",
  "placeholder:text-[var(--color-muted-foreground)] disabled:cursor-not-allowed disabled:opacity-50"
]);

export const commandListVariants = cva([
  "max-h-[22rem] overflow-y-auto overflow-x-hidden p-2"
]);

export const commandLoadingVariants = cva([
  "px-4 py-8 text-sm text-[var(--color-muted-foreground)]"
]);

export const commandEmptyVariants = cva([
  "py-10 text-center text-sm text-[var(--color-muted-foreground)]"
]);

export const commandGroupVariants = cva([
  "overflow-hidden p-1 text-[var(--color-foreground)]",
  "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5",
  "[&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
  "[&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-[var(--tracking-caps)]",
  "[&_[cmdk-group-heading]]:text-[var(--color-muted-foreground)]"
]);

export const commandItemVariants = cva([
  "relative flex cursor-default select-none items-center gap-3 rounded-[var(--ui-control-radius)] px-3 py-2 text-sm outline-none",
  "text-[var(--color-foreground)] transition-colors duration-[var(--dur-fast)] ease-[var(--ease-standard)]",
  "data-[selected=true]:bg-[var(--ui-control-bg)] data-[selected=true]:text-[var(--color-foreground)]",
  "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-45"
]);

export const commandSeparatorVariants = cva([
  "-mx-1 my-1 h-px bg-[var(--color-border)]"
]);

export const commandShortcutVariants = cva([
  "ml-auto text-[0.7rem] uppercase tracking-[var(--tracking-caps)] text-[var(--color-muted-foreground)]"
]);

export const commandFooterVariants = cva([
  "border-t border-[var(--ui-panel-border)] bg-[color-mix(in_oklch,var(--ui-panel-bg)_94%,var(--color-background))] px-4 py-3"
]);