"use client";

import * as React from "react";
import { Select as KumoSelect } from "@cloudflare/kumo/components/select";

export type SelectOption = {
  value: string;
  label: React.ReactNode;
  disabled?: boolean;
};

type SelectProps = {
  "aria-label"?: string;
  className?: string;
  defaultValue?: string;
  disabled?: boolean;
  label?: React.ReactNode;
  name?: string;
  onValueChange?: (value: string) => void;
  options: SelectOption[];
  placeholder?: string;
  required?: boolean;
  value?: string;
};

export function Select({
  onValueChange,
  options,
  placeholder,
  value,
  defaultValue,
  ...props
}: SelectProps): React.ReactElement {
  return (
    <KumoSelect<string>
      defaultValue={defaultValue}
      onValueChange={(nextValue) => onValueChange?.(String(nextValue))}
      placeholder={placeholder}
      value={value}
      {...props}
    >
      {options.map((option) => (
        <KumoSelect.Option key={option.value} disabled={option.disabled} value={option.value}>
          {option.label}
        </KumoSelect.Option>
      ))}
    </KumoSelect>
  );
}