'use client';

import React from 'react';

export default function FieldSet({ fields, register }) {
  return (
    <div className="p-4 grid grid-cols-1 md:grid-cols-2 gap-4 bg-white border-x border-b rounded-b-lg -mt-4 mb-4">
      {fields.map((field) => (
        <div key={field.name} className="flex flex-col">
          <label htmlFor={field.name} className="text-sm font-medium text-gray-700 mb-1">
            {field.label}
          </label>
          <input
            id={field.name}
            {...register(field.name)}
            className="border border-gray-300 rounded px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none transition"
            placeholder={`Enter ${field.label.toLowerCase()}`}
          />
        </div>
      ))}
    </div>
  );
}