import { __ } from "@wordpress/i18n"
export default function Step2({ setStep, selectedHomepage, setSelectedHomepage }) {
    const homepageOptions = storebuild.homepages || [];

    return (
        <div className="p-8">
            <h2 className="text-2xl font-semibold mb-4">{__('What kind of store you want?', 'shopbuild')}</h2>
            <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
                {homepageOptions.map((home) => (
                    <label key={home.id} className={`border rounded p-4 cursor-pointer ${selectedHomepage === home.id ? 'border-blue-600' : 'border-gray-300'}`}>
                        <img src={'https://storebuild.shop/library/thumbnails/' + home.thumbnail} alt={home.title} className="mb-2 rounded border-0" />
                        <div className="flex items-center justify-between">
                            <span>{home.title}</span>
                            <input type="radio" name="homepage" checked={selectedHomepage === home.id} onChange={() => setSelectedHomepage(home.id)} />
                        </div>
                    </label>
                ))}
            </div>
            <div className="mt-6 flex justify-between">
                <button onClick={() => setStep(1)} className="text-gray-600">{__('Back', 'shopbuild')}</button>
                <button onClick={() => setStep(3)} className="px-6 py-2 bg-blue-600 text-white rounded">{__('Next', 'shopbuild')}</button>
            </div>
        </div>
    );
}