import InputText from '@/components/InputText';
import InputPhone from '@/components/InputPhone';
import Button from '@/components/Button';
import React from 'react';
import { useTranslations } from 'next-intl';
import 'react-phone-number-input/style.css'
import { Trash2, Plus } from 'lucide-react';

export default function ResponsableInputFields({guardians, onGuardiansChange, addGuardian, deleteGuardian, errors = []}) {
    const t = useTranslations('ResponsableInputFields');

    const getError = (index, field) => {
        return errors[index]?.[field]?.[0];
    };

    return (
        <div className="space-y-8">
            {guardians.map((item, index) => (
                <div className="p-6 bg-gray-50 rounded-lg shadow-sm" key={index}>
                    <div className='flex justify-between items-center mb-4'>
                        <h3 className='text-xl font-bold'>{t('responsable')} {index+1}</h3>
                        {guardians.length > 1 && (
                            <Trash2
                                className="w-5 h-5 text-red-500 cursor-pointer hover:text-red-700 transition-colors"
                                onClick={() => deleteGuardian(index)}
                            />
                        )}
                    </div>

                    <input type="hidden" name="idResponsable" value={item.id} />


                    <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mb-4'>
                        <InputText
                            name="nomResponsable"
                            type="text"
                            label={t('lastname')}
                            value={item.last_name}
                            onChange={(event) => {onGuardiansChange(item.id, "last_name", event.target.value)}}
                            errorMsg={getError(index, 'last_name')}
                            required
                        />
                        <InputText
                            name="prenomResponsable"
                            type="text"
                            label={t('firstname')}
                            value={item.first_name}
                            onChange={(event) => {onGuardiansChange(item.id, "first_name", event.target.value)}}
                            errorMsg={getError(index, 'first_name')}
                            required
                        />
                    </div>

                    <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mb-4'>
                        <InputText
                            name="mailResponsable"
                            type="email"
                            label={t('email')}
                            value={item.email}
                            onChange={(event) => {onGuardiansChange(item.id, "email", event.target.value)}}
                            required
                            errorMsg={getError(index, 'email')}
                        />
                        <InputPhone
                            name="telephoneResponsable"
                            label={t('phone')}
                            value={item.phone}
                            onChange={(event) => {onGuardiansChange(item.id, "phone", event)}}
                            required
                            errorMsg={getError(index, 'phone')}
                        />
                    </div>

                    <div className='grid grid-cols-1 md:grid-cols-2 gap-4 mb-4'>
                        <InputText
                            name="dateNaissanceResponsable"
                            type="date"
                            label={t('birthdate')}
                            value={item.birth_date}
                            onChange={(event) => {onGuardiansChange(item.id, "birth_date", event.target.value)}}
                            required
                            errorMsg={getError(index, 'birth_date')}
                        />
                        <InputText
                            name="professionResponsable"
                            type="text"
                            label={t('profession')}
                            value={item.profession}
                            onChange={(event) => {onGuardiansChange(item.id, "profession", event.target.value)}}
                            required
                            errorMsg={getError(index, 'profession')}
                        />
                    </div>

                    <div className='grid grid-cols-1 gap-4'>
                        <InputText
                            name="adresseResponsable"
                            type="text"
                            label={t('address')}
                            value={item.address}
                            onChange={(event) => {onGuardiansChange(item.id, "address", event.target.value)}}
                            required
                            errorMsg={getError(index, 'address')}
                        />
                    </div>
                </div>
            ))}

            <div className="flex justify-center">
                <Plus
                    className="w-8 h-8 text-green-500 cursor-pointer hover:text-green-700 transition-colors border-2 border-green-500 hover:border-green-700 rounded-full p-1"
                    onClick={(e) => addGuardian(e)}
                />
            </div>
        </div>
    );
}