/**
 * Select Component
 *
 * Wrapper around Radix UI Select for consistent styling.
 */

import * as RadixSelect from "@radix-ui/react-select";
import {ChevronDownIcon, CheckIcon} from "@radix-ui/react-icons";

export interface SelectOption {
  value: string;
  label: string;
  disabled?: boolean;
}

interface SelectProps {
  value: string;
  onValueChange: (value: string) => void;
  options: SelectOption[];
  placeholder?: string;
  disabled?: boolean;
  className?: string;
  /** Use compact size for floating panels */
  size?: "default" | "compact";
}

export function Select({
  value,
  onValueChange,
  options,
  placeholder = "Select...",
  disabled = false,
  className = "",
  size = "default",
}: SelectProps) {
  const triggerClass =
    size === "compact" ? "floating-popover__select" : "select-trigger";

  const contentClass =
    size === "compact" ? "floating-popover__select-content" : "select-content";

  const itemClass =
    size === "compact" ? "floating-popover__select-item" : "select-item";

  const indicatorClass =
    size === "compact"
      ? "floating-popover__select-indicator"
      : "select-item-indicator";

  return (
    <RadixSelect.Root
      value={value}
      onValueChange={onValueChange}
      disabled={disabled}
    >
      <RadixSelect.Trigger className={`${triggerClass} ${className}`}>
        <RadixSelect.Value placeholder={placeholder} />
        <RadixSelect.Icon>
          <ChevronDownIcon className="w-4 h-4" />
        </RadixSelect.Icon>
      </RadixSelect.Trigger>
      <RadixSelect.Portal>
        <RadixSelect.Content className={contentClass}>
          <RadixSelect.Viewport>
            {options.map((option) => (
              <RadixSelect.Item
                key={option.value}
                value={option.value}
                className={itemClass}
                disabled={option.disabled}
              >
                <RadixSelect.ItemText>{option.label}</RadixSelect.ItemText>
                <RadixSelect.ItemIndicator className={indicatorClass}>
                  <CheckIcon className="w-3.5 h-3.5" />
                </RadixSelect.ItemIndicator>
              </RadixSelect.Item>
            ))}
          </RadixSelect.Viewport>
        </RadixSelect.Content>
      </RadixSelect.Portal>
    </RadixSelect.Root>
  );
}

export default Select;
