// Form Select Component
import { SelectHTMLAttributes, forwardRef } from 'react';
import { clsx } from 'clsx';
import './FormSelect.css';

interface FormSelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
  label?: string;
  error?: string;
  helperText?: string;
  options: Array<{ value: string; label: string }>;
}

const FormSelect = forwardRef<HTMLSelectElement, FormSelectProps>(
  ({ label, error, helperText, options, className, ...props }, ref) => {
    return (
      <div className="form-select">
        {label && (
          <label className="form-select__label" htmlFor={props.id}>
            {label}
            {props.required && <span className="form-select__required">*</span>}
          </label>
        )}
        <select
          ref={ref}
          className={clsx('form-select__select', { 'form-select__select--error': error }, className)}
          {...props}
        >
          {options.map((option) => (
            <option key={option.value} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
        {error && <span className="form-select__error">{error}</span>}
        {helperText && !error && <span className="form-select__helper">{helperText}</span>}
      </div>
    );
  }
);

FormSelect.displayName = 'FormSelect';

export default FormSelect;

