import * as React from "react";
import { cn } from "@/lib/utils";

export interface SelectOption {
  value: string;
  label: string;
}

interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "children"> {
  options: SelectOption[];
  placeholder?: string;
  error?: boolean;
}

export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
  ({ className, options, placeholder, error, disabled, ...props }, ref) => (
    <select
      ref={ref}
      className={cn(
        "h-10 w-full rounded-lg border bg-(--color-surface) px-4 text-sm text-(--color-ink)",
        "outline-none transition-all duration-200",
        "shadow-sm",
        "focus-visible:ring-2 focus-visible:ring-(--color-accent)/20 focus-visible:border-(--color-accent) focus-visible:shadow-md",
        "hover:border-(--color-border-dark)",
        "disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none",
        error
          ? "border-(--color-danger) focus-visible:ring-(--color-danger)/20 focus-visible:border-(--color-danger)"
          : "border-(--color-border)",
        className
      )}
      disabled={disabled}
      {...props}
    >
      {placeholder && <option value="">{placeholder}</option>}
      {options.map((opt) => (
        <option key={opt.value} value={opt.value}>
          {opt.label}
        </option>
      ))}
    </select>
  )
);
Select.displayName = "Select";