"use client";

import { Input as InputPrimitive } from "@base-ui/react/input";
import { cva, type VariantProps } from "class-variance-authority";

import { cn } from "./cn";

const inputVariants = cva(
  [
    "w-full min-w-0 border border-(color:--color-border)",
    "rounded-(--input-radius) bg-(color:--input-background)",
    "text-(length:--font-size-control) text-(color:--color-content) any-pointer-coarse:text-(length:--font-size-control-coarse)",
    "placeholder:text-(color:--color-content-muted)",
    "transition-[border-color,background-color,outline-color]",
    "duration-(--motion-duration) ease-(--motion-ease)",
    "outline-none focus-visible:border-(color:--color-brand-accent)",
    "focus-visible:outline-solid",
    "focus-visible:outline-(length:--focus-ring-width)",
    "focus-visible:outline-(color:--color-focus-ring)",
    "focus-visible:-outline-offset-1",
    "aria-invalid:border-(color:--color-action-danger)",
    "aria-invalid:focus-visible:outline-(color:--color-action-danger)",
    "disabled:cursor-not-allowed disabled:bg-(color:--input-disabled-background)",
    "disabled:opacity-50 data-disabled:cursor-not-allowed",
    "data-disabled:bg-(color:--input-disabled-background) data-disabled:opacity-50",
    "file:inline-flex file:border-0 file:bg-transparent",
    "file:text-(length:--font-size-control) file:font-medium file:text-(color:--color-content)",
  ],
  {
    variants: {
      size: {
        sm: "h-(--input-height-sm) px-(--input-padding-x-sm)",
        md: "h-(--input-height-md) px-(--input-padding-x-md)",
        lg: "h-(--input-height-lg) px-(--input-padding-x-lg)",
      },
    },
    defaultVariants: { size: "md" },
  },
);

type InputVariants = VariantProps<typeof inputVariants>;

export interface InputProps
  extends Omit<InputPrimitive.Props, "className" | "size">,
    InputVariants {
  className?: string;
}

function Input({ className, size, ...props }: InputProps) {
  return (
    <InputPrimitive
      data-slot="input"
      className={cn(inputVariants({ size }), className)}
      {...props}
    />
  );
}

export { Input, inputVariants };