import React from 'react';
import './fields.css';

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

type SelectMultiProps = {
  label?: string;
  description?: string;
  value: string[];
  onChange: (values: string[]) => void;
  options: Option[];
  placeholder?: string;
};

export const SelectMulti: React.FC<SelectMultiProps> = ({
  label,
  description,
  value,
  onChange,
  options,
  placeholder = 'Select…',
}) => {
  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const selected = Array.from(e.target.selectedOptions).map((opt) => opt.value);
    onChange(selected);
  };

  return (
    <div className="ips-field-group">
      {label && <div className="ips-field-label">{label}</div>}
      <select className="ips-field-select ips-field-select--multi" multiple value={value} onChange={handleChange}>
        {placeholder && <option value="">{placeholder}</option>}
        {options.map((opt) => (
          <option key={opt.value} value={opt.value}>
            {opt.label}
          </option>
        ))}
      </select>
      {description && <div className="ips-field-description">{description}</div>}
    </div>
  );
};