// frontend/src/components/UI/Toolbar.jsx
import React from 'react';

const Toolbar = ({ onSave, onExport, onTemplateChange, currentTemplate }) => {
  const templates = [
    { id: 'modern', name: 'Modern', icon: '🎨' },
    { id: 'classic', name: 'Classic', icon: '📄' },
    { id: 'minimal', name: 'Minimal', icon: '✨' }
  ];
  
  return (
    <div className="fixed top-0 left-0 right-0 bg-white border-b border-gray-200 px-6 py-3 flex justify-between items-center z-50">
      <div className="flex items-center gap-4">
        <h1 className="text-xl font-bold text-gray-800">ResumeBuilder</h1>
        <div className="flex gap-2">
          {templates.map(t => (
            <button
              key={t.id}
              onClick={() => onTemplateChange(t.id)}
              className={`px-4 py-2 rounded-lg transition ${currentTemplate === t.id ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'}`}
            >
              {t.icon} {t.name}
            </button>
          ))}
        </div>
      </div>
      <div className="flex gap-3">
        <button onClick={onSave} className="px-5 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition">
          💾 Save Resume
        </button>
        <button onClick={onExport} className="px-5 py-2 bg-purple-500 text-white rounded-lg hover:bg-purple-600 transition">
          📥 Download PDF
        </button>
      </div>
    </div>
  );
};

export default Toolbar;