import { useState } from 'react';
import { UploadTab } from './UploadTab';
import { StickersTab } from './StickersTab';
import { TextTab } from './TextTab';

const TABS = [
  { id: 'upload', label: 'Upload', icon: '📁' },
  { id: 'stickers', label: 'Stickers', icon: '😊' },
  { id: 'text', label: 'Text', icon: 'T' },
];

export function Sidebar({ onElementAdd, onUpload }) {
  const [activeTab, setActiveTab] = useState('upload');

  const renderTabContent = () => {
    switch (activeTab) {
      case 'upload':
        return <UploadTab onUpload={onUpload} />;
      case 'stickers':
        return <StickersTab onAddSticker={onElementAdd} />;
      case 'text':
        return <TextTab onAddText={onElementAdd} />;
      default:
        return null;
    }
  };

  return (
    <div className="sidebar">
      <div className="sidebar-tabs">
        {TABS.map((tab) => (
          <button
            key={tab.id}
            className={`sidebar-tab ${activeTab === tab.id ? 'active' : ''}`}
            onClick={() => setActiveTab(tab.id)}
            title={tab.label}
          >
            <span className="tab-icon">{tab.icon}</span>
            <span className="tab-label">{tab.label}</span>
          </button>
        ))}
      </div>
      <div className="sidebar-content">{renderTabContent()}</div>
    </div>
  );
}