import React from "react";

interface OptionType { value: string | number; label: string; }

interface CommonDropdownProps {
  label?: string;
  value: any;
  onChange: (e: React.ChangeEvent<HTMLSelectElement>) => void;
  options: OptionType[];
  required?: boolean;
  disabled?: boolean;
}

export default function CommonDropdown({
  label = "", value, onChange, options = [], required = false, disabled = false,
}: CommonDropdownProps) {
  const fieldId = `select-${label.toLowerCase().replace(/\s+/g, "-")}`;
  return (
    <>
      <label htmlFor={fieldId}>{label}</label>
      <select
        className="form-select"
        id={fieldId}
        aria-label={label}
        value={value}
        onChange={onChange}
        required={required}
        disabled={disabled}
      >
        <option value="">Select {label.toLowerCase()}</option>
        {options.map((item) => (
          <option key={item.value} value={item.value}>{item.label}</option>
        ))}
      </select>
    </>
  );
}