import { __ } from "@wordpress/i18n"

export default function Step3({ setStep, setSelectedTemplates, selectedTemplates }){
    const templates = storebuild.built_in_templates || [];
    const freeTemplates = templates
        .filter(template => !template.isPro)
        .filter((template, index, self) =>
            index === self.findIndex(t => t.type === template.type)
        );

        
    return (
        <div className="p-8">
            <h2 className="text-2xl font-semibold mb-4">{__('Need any prebuilt Store\'s templates?', 'shopbuild')}</h2>
            <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
                {freeTemplates.map((temp) => (
                    <label
                        key={temp.id}
                        className={`border rounded p-4 cursor-pointer ${selectedTemplates.includes(temp.id) ? 'border-blue-600' : 'border-gray-300'}`}
                    >
                        <img src={'https://storebuild.shop/templates/previews/' + temp.thumbnail} alt={temp.title} className="mb-2 rounded border-0" />
                        <div className="flex items-center justify-between">
                            <span>{temp.title}</span>
                            <input
                                type="checkbox"
                                name="templates[]"
                                checked={selectedTemplates.includes(temp.id)}
                                onChange={(e) => {
                                    if (e.target.checked) {
                                        setSelectedTemplates([...selectedTemplates, temp.id]);
                                    } else {
                                        setSelectedTemplates(selectedTemplates.filter((id) => id !== temp.id));
                                    }
                                }}
                            />
                        </div>
                    </label>
                ))}
            </div>
            <div className="mt-6 flex justify-between">
                <button onClick={() => setStep(2)} className="text-gray-600">Back</button>
                <button onClick={() => setStep(4)} className="px-6 py-2 bg-blue-600 text-white rounded">Next</button>
            </div>
        </div>
    );
}