import React, { useState, useEffect } from 'react';
import InputText from '@/components/Form/InputText';
import Button from '@/components/Form/Button';

export default function RegistrationFileGroupForm({ onSubmit, initialData }) {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');

  useEffect(() => {
    if (initialData) {
      setName(initialData.name);
      setDescription(initialData.description);
    }
  }, [initialData]);

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit({ name, description });
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      {/* Utilisation de InputText pour le nom du groupe */}
      <InputText
        label="Nom du groupe"
        name="name"
        value={name}
        onChange={(e) => setName(e.target.value)}
        required
      />
      <InputText
        label="Description"
        name="description"
        value={description}
        onChange={(e) => setDescription(e.target.value)}
        required={false}
      />

      <div className="flex justify-end">
        <Button
          primary
          type="submit"
          text="Enregistrer"
        />
      </div>
    </form>
  );
}
