import React, { useState } from 'react';
import { BlocksPanel } from './BlocksPanel';
import { PagesPanel } from './PagesPanel';
import { LayersPanel } from './LayersPanel';
import { AssetsPanel } from './AssetsPanel';

type LeftTab = 'blocks' | 'pages' | 'layers' | 'assets';

export const LeftPanel: React.FC = () => {
  const [activeTab, setActiveTab] = useState<LeftTab>('blocks');

  const tabs: { id: LeftTab; label: string }[] = [
    { id: 'blocks', label: 'Blocks' },
    { id: 'pages', label: 'Pages' },
    { id: 'layers', label: 'Layers' },
    { id: 'assets', label: 'Assets' },
  ];

  return (
    <div className="panel-left">
      <div className="panel-tabs">
        {tabs.map((tab) => (
          <button
            key={tab.id}
            className={`panel-tab ${activeTab === tab.id ? 'active' : ''}`}
            onClick={() => setActiveTab(tab.id)}
          >
            {tab.label}
          </button>
        ))}
      </div>
      <div className="panel-content">
        {activeTab === 'blocks' && <BlocksPanel />}
        {activeTab === 'pages' && <PagesPanel />}
        {activeTab === 'layers' && <LayersPanel />}
        {activeTab === 'assets' && <AssetsPanel />}
      </div>
    </div>
  );
};
