import { cva, type VariantProps } from "class-variance-authority";
import { splitProps, type JSX } from "solid-js";
import { cn } from "../../lib/cn";

export const inputVariants = cva(
  "w-full rounded-md border border-line bg-white px-3 text-sm text-ink outline-none transition-colors focus:border-brand disabled:cursor-not-allowed disabled:opacity-45 aria-invalid:border-coral-strong",
  {
    variants: {
      density: {
        default: "min-h-10 py-2",
        compact: "min-h-9 py-1.5",
      },
    },
    defaultVariants: {
      density: "default",
    },
  },
);

export type InputProps = JSX.InputHTMLAttributes<HTMLInputElement> &
  VariantProps<typeof inputVariants>;

/** Native single-line input with a minimum, rather than fixed, control height. */
export function Input(props: InputProps) {
  const [local, rest] = splitProps(props, ["density", "class"]);
  return (
    <input
      {...rest}
      data-slot="input"
      class={cn(inputVariants({ density: local.density }), local.class)}
    />
  );
}
