'use client';

import React from 'react';
import { useField } from 'formik';
import { FieldGroup } from './FieldGroup';

interface Option {
  value: string | number;
  label: string;
}

interface Props {
  name: string;
  label?: string;
  options: Option[];
  placeholder?: string;
  required?: boolean;
}

export function FormSelectField({ name, label, options, placeholder, required }: Props) {
  const [field, meta] = useField(name);
  const showError = meta.touched && Boolean(meta.error);

  return (
    <FieldGroup label={label} required={required} error={showError ? meta.error : undefined}>
      <select
        {...field}
        id={name}
        value={field.value ?? ''}
        className={`field-input ${showError ? 'border-red-400 focus:ring-red-200 focus:border-red-400' : ''}`}
      >
        {placeholder && <option value="">{placeholder}</option>}
        {options.map((o) => (
          <option key={o.value} value={o.value}>
            {o.label}
          </option>
        ))}
      </select>
    </FieldGroup>
  );
}