import React from 'react';
import { SelectFieldProps } from './types';
import { Field, Label, Required, ErrorText } from './styles';
import { CustomSelect } from './CustomSelect';

export const SelectField: React.FC<SelectFieldProps> = ({
  isApp,
  id,
  label,
  required,
  value,
  field,
  error,
  options,
  updateField,
  placeholder
}) => (
  <Field $applyMinWidth={field === 'month'}>
    <Label isApp={isApp} htmlFor={id}>
      {label} {required && <Required>*</Required>}
    </Label>
    <CustomSelect
      id={id}
      value={value}
      options={options}
      onChange={val => updateField(field, val)}
      $hasError={!!error}
      isApp={isApp}
      placeholder={placeholder}
    />
    {error && <ErrorText>{error}</ErrorText>}
  </Field>
);