import { memo, forwardRef } from 'react';
import cc from 'classcat';

interface SelectOptions {
  label: string;
  value: string;
}

export interface SelectProps
  extends React.SelectHTMLAttributes<HTMLSelectElement> {
  options?: SelectOptions[];
  placeholder?: string;
  className?: string;
}

export const Select = memo(
  forwardRef<HTMLSelectElement, SelectProps>(function Select(
    { options = [], placeholder, className, ...props },
    ref
  ) {
    const cn = cc(['input', { checked: props.value }, className]);
    return (
      <select className={cn} {...props} ref={ref}>
        {placeholder && <option value="">{placeholder}</option>}

        {options?.map(({ label, value }) => {
          return (
            <option value={value} key={value}>
              {label}
            </option>
          );
        })}
      </select>
    );
  })
);