'use client';

type Option = { label: string; value: string };

type SiteSelectorProps = {
  options: Option[];                 // e.g. [{label: 'Timo… (Installation)', value: 'PROJ-0008'}, …]
  selectedValue: string | null;      // the selected project "name" (siteId) or null
  onChange: (value: string) => void; // called with the selected value
  label?: string;
  disabled?: boolean;
};

const SiteSelector = ({
  options,
  selectedValue,
  onChange,
  label = 'Select Site:',
  disabled = false,
}: SiteSelectorProps) => {
  const isEmpty = !options || options.length === 0;

  return (
    <div className="flex flex-col">
      <label htmlFor="site" className="font-semibold text-lg dark:text-white">
        {label}
      </label>

      <select
        id="site"
        className="border p-2 rounded dark:text-white dark:bg-rtgray-800 dark:border-rtgray-700"
        value={selectedValue ?? ''}                 // keep controlled even when null
        onChange={(e) => onChange(e.target.value)}
        disabled={disabled || isEmpty}
      >
        {/* Placeholder when nothing selected */}
        <option value="" disabled>
          {isEmpty ? 'No sites available' : 'Choose a site…'}
        </option>

        {options.map((opt) => (
          <option key={opt.value} value={opt.value}>
            {opt.label}
          </option>
        ))}
      </select>
    </div>
  );
};

export default SiteSelector;

