'use client';

type CompactSelectProps = React.SelectHTMLAttributes<HTMLSelectElement>;

/** Compact styled `<select>` — chevron from global `.form-select` styles. */
export function CompactSelect({ className = '', children, ...props }: CompactSelectProps) {
  return (
    <select
      className={`form-select w-full appearance-none rounded-[var(--radius-sm)] border border-border bg-background-card/90 text-text-primary text-sm ps-3 pe-10 py-1.5 focus:outline-none focus:ring-2 focus:ring-primary/35 focus:border-border-strong disabled:cursor-not-allowed disabled:opacity-60 ${className}`}
      {...props}
    >
      {children}
    </select>
  );
}