// frontend/src/components/TemplateSelector.jsx
import React from 'react';
import { useResume } from '../contexts/ResumeContext';

const TemplateSelector = () => {
    const { template, setTemplate } = useResume();
    
    const templates = [
        { id: 'modern', name: 'Modern', description: 'Clean with accent colors', icon: '🎨' },
        { id: 'minimal', name: 'Minimal', description: 'ATS-friendly, simple', icon: '📄' },
        { id: 'professional', name: 'Professional', description: 'Classic executive style', icon: '💼' }
    ];

    return (
        <div className="card p-6">
            <h3 className="text-lg font-semibold mb-4">Template Selection</h3>
            <div className="grid grid-cols-3 gap-3">
                {templates.map(t => (
                    <button
                        key={t.id}
                        onClick={() => setTemplate(t.id)}
                        className={`p-3 rounded-lg border-2 transition-all ${
                            template === t.id 
                                ? 'border-primary-600 bg-primary-50 dark:bg-primary-900/30' 
                                : 'border-gray-200 dark:border-gray-700 hover:border-primary-300'
                        }`}
                    >
                        <div className="text-2xl mb-1">{t.icon}</div>
                        <div className="font-medium text-sm">{t.name}</div>
                        <div className="text-xs text-gray-500 mt-1">{t.description}</div>
                    </button>
                ))}
            </div>
        </div>
    );
};

export default TemplateSelector;