import { ChangeEvent } from "react";

export interface FilterSelectProps {
  title: string;
  selectValue: string;
  selectSetter: (value: any) => void;
  selectOptions: Array<Record<string, string>>;
};
export const FilterSelect = ({
  title,
  selectValue,
  selectSetter,
  selectOptions,
}: FilterSelectProps) => {

  const getSelectOptions = () => {
    let rs = [];
    for(let i=0;i<selectOptions.length;i++){
      rs.push(
        <option
          key={ `key-filter-select-${i}` }
          value={ selectOptions[i]?.value }
        >{ selectOptions[i]?.name }</option>
      );
    }
    return rs;
  };
  
  return (
    <>
      <div className="opt-field">
        <div 
          className="opt-label"
          style={{ fontSize: 'var(--fs-14)' }}
        >{ title }</div>
        <div className="opt-controls">
          <select 
            className="flex-1"
            value={ selectValue } 
            onChange={ (e: ChangeEvent<HTMLSelectElement>) => selectSetter(e.target.value)}
          >
            { getSelectOptions() }
          </select>
        </div>
      </div>
    </>
  );
};