import { useDispatch, useSelector } from 'react-redux';
import { updateFieldAndSaveToAPI, updateFormField } from '../../app/reducers/registrationstep1';
import { AppDispatch, RootState } from '../../app/store';

export default function MaritalStatus() {
    const registrationstep1 = useSelector((state: RootState) => state.registrationstep1);
    const { attributes } = useSelector((state: RootState) => state.profileattributelist);
    const dispatch = useDispatch<AppDispatch>();
    const handleStatusSelect = (status: {id: number, name: string}) => {
        dispatch(updateFormField({
            fieldName: 'maritalStatus',
            value: status.name
        }));

        dispatch(updateFieldAndSaveToAPI({ fieldName: 'maritalStatus', value: {maritalStatus: status.id} }));
    };

    return (
        <div className="flex flex-col bg-white">
            {/* Header with back button and sound icon */}
            {/* <div className="flex justify-between items-center p-4">
                <button className="p-1">
                    <ChevronLeft size={24} />
                </button>
                <button className="p-1 bg-green-500 rounded-full">
                    <Volume2 size={24} className="text-white" />
                </button>
            </div> */}

            {/* Marital status icon */}
            <div className="flex justify-center mt-4">
                <div className="w-32 h-32 rounded-full bg-blue-100 flex items-center justify-center">
                    <img 
                        src="/src/images/registration/marital-status.png" 
                        alt="Marital status" 
                        className="w-32 h-32"
                    />
                </div>
            </div>

            {/* Title */}
            <div className="mt-6 px-6">
                <h1 className="text-2xl font-bold text-center">Select your marital status</h1>
            </div>

            {/* Marital status options */}
            <div className="mt-12 px-6 space-y-4">
                {attributes.maritial_status && attributes.maritial_status.map((status) => (
                    <button
                        key={status.id}
                        className={`w-full py-4 px-6 text-lg font-medium rounded-full border ${
                            registrationstep1.formFields.maritalStatus.value === status.name
                                ? 'bg-primary text-white border-primary' 
                                : 'bg-white text-black border-gray-300'
                        }`}
                        onClick={() => handleStatusSelect(status)}
                    >
                        {status.name}
                    </button>
                ))}
            </div>
        </div>
    );
}