import React from 'react';
import { FormField } from '@/_types/Types';
import Button from '@/_components/Button';

interface DynamicFormProps {
    schema: FormField[] | undefined;
    onSubmit: (data: Record<string, unknown>) => void;
}

const DynamicForm: React.FC<DynamicFormProps> = ({ schema, onSubmit }) => {
    const [formData, setFormData] = React.useState<Record<string, unknown>>({});

    const handleChange = (name: string, value: unknown) => {
        setFormData((prev) => ({ ...prev, [name]: value }));
    };

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        console.log(formData, 'formData')
        onSubmit(formData);
    };

    return (
        <form onSubmit={handleSubmit} className="space-y-4 my-5">
            {schema?.map((field) => {
                switch (field.type) {
                    case 'text':
                    case 'date':
                        return (
                            <div key={field.name}>
                                <label htmlFor={field.name} className='font-semibold'>{field.label}</label>
                                <input
                                    type={field.type}
                                    id={field.name}
                                    name={field.name}
                                    required={field.required}
                                    className="border p-2 w-full h-10 rounded-md bg-gray-200"
                                    onChange={(e) => handleChange(field.name, e.target.value)}
                                />
                            </div>
                        );
                    case 'select':
                        return (
                            <div key={field.name}>
                                <label htmlFor={field.name} className='font-semibold'>{field.label}</label>
                                <select
                                    required={field.required}
                                    id={field.name}
                                    name={field.name}
                                    className="border p-2 w-full h-10 rounded-md bg-gray-200"
                                    onChange={(e) => handleChange(field.name, e.target.value)}
                                >
                                    <option value="">Select...</option>
                                    {field.options?.map((option) => (
                                        <option key={option} value={option} className="border">
                                            {option}
                                        </option>
                                    ))}
                                </select>
                            </div>
                        );
                    default:
                        return null;
                }
            })}
            <div className='text-center'>
                <Button type='submit'>
                    Book
                </Button>
            </div>

        </form>
    );
};

export default DynamicForm;