'use client';

import React from 'react';
import { useField } from 'formik';

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

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

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

  return (
    <div className="space-y-1.5">
      <label className="flex items-center gap-1 text-sm font-medium text-foreground">
        {label}
        {required && <span className="text-red-500">*</span>}
      </label>
      <div className="toggle-group">
        {options.map((o) => (
          <button
            key={o.value}
            type="button"
            className={`toggle-btn ${field.value === o.value ? 'active' : ''}`}
            onClick={() => helpers.setValue(o.value)}
          >
            {o.label}
          </button>
        ))}
      </div>
      {showError && <p className="text-xs text-red-500">{meta.error}</p>}
    </div>
  );
}