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

export const selectVariants = 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 SelectProps = JSX.SelectHTMLAttributes<HTMLSelectElement> &
  VariantProps<typeof selectVariants>;

/** Native select with browser behavior preserved and a content-growable height. */
export function Select(props: SelectProps) {
  const [local, rest] = splitProps(props, ["density", "class", "children"]);
  return (
    <select
      {...rest}
      data-slot="select"
      class={cn(selectVariants({ density: local.density }), local.class)}
    >
      {local.children}
    </select>
  );
}
