vit-design-webapp

'use client';

import React from 'react';
import {
  Smartphone,
  LayoutTemplate,
  Type,
  Shapes,
  Image,
  Sparkles,
  Download,
  Palette,
  ImageIcon,
  SlidersHorizontal,
  Layers,
} from 'lucide-react';
import { useEditorStore } from '@/lib/store/editor-store';
import { DevicePanel } from './DevicePanel';
import { TemplatePanel } from './TemplatePanel';
import { TextPanel } from './TextPanel';
import { ShapesPanel } from './ShapesPanel';
import { ImagesPanel } from './ImagesPanel';
import { StockImagesPanel } from './StockImagesPanel';
import { EffectsPanel } from './EffectsPanel';
import { AdjustmentsPanel } from './AdjustmentsPanel';
import { GradientPanel } from './GradientPanel';
import { ExportPanel } from './ExportPanel';
import { BrandPanel } from './BrandPanel';

const tabs = [
  { id: 'templates', label: 'Templates', icon: LayoutTemplate },
  { id: 'devices', label: 'Devices', icon: Smartphone },
  { id: 'text', label: 'Text', icon: Type },
  { id: 'shapes', label: 'Shapes', icon: Shapes },
  { id: 'images', label: 'Images', icon: Image },
  { id: 'stock', label: 'Stock Photos', icon: ImageIcon },
  { id: 'effects', label: 'Effects', icon: Sparkles },
  { id: 'adjustments', label: 'Adjustments', icon: SlidersHorizontal },
  { id: 'backgrounds', label: 'Backgrounds', icon: Layers },
  { id: 'brand', label: 'Brand', icon: Palette },
  { id: 'export', label: 'Export', icon: Download },
] as const;

export function Sidebar() {
  const { sidebarTab, setSidebarTab } = useEditorStore();

  const renderPanel = () => {
    switch (sidebarTab) {
      case 'devices':
        return <DevicePanel />;
      case 'templates':
        return <TemplatePanel />;
      case 'text':
        return <TextPanel />;
      case 'shapes':
        return <ShapesPanel />;
      case 'images':
        return <ImagesPanel />;
      case 'stock':
        return <StockImagesPanel />;
      case 'effects':
        return <EffectsPanel />;
      case 'adjustments':
        return <AdjustmentsPanel />;
      case 'backgrounds':
        return <GradientPanel />;
      case 'export':
        return <ExportPanel />;
      case 'brand':
        return <BrandPanel />;
      default:
        return <TemplatePanel />;
    }
  };

  return (
    <div className="flex h-full">
      {/* Tab icons */}
      <div className="w-14 bg-neutral-900 border-r border-neutral-800 flex flex-col py-2">
        {tabs.map((tab) => {
          const Icon = tab.icon;
          const isActive = sidebarTab === tab.id;

          return (
            <button
              key={tab.id}
              onClick={() => setSidebarTab(tab.id)}
              className={`
                w-full h-12 flex items-center justify-center
                transition-colors relative group
                ${isActive ? 'text-indigo-400' : 'text-neutral-500 hover:text-neutral-300'}
              `}
              title={tab.label}
            >
              {isActive && (
                <div className="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-6 bg-indigo-500 rounded-r" />
              )}
              <Icon className="w-5 h-5" />

              {/* Tooltip */}
              <div className="absolute left-full ml-2 px-2 py-1 bg-neutral-800 rounded text-xs text-white whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-50">
                {tab.label}
              </div>
            </button>
          );
        })}
      </div>

      {/* Panel content */}
      <div className="w-72 bg-neutral-900/50 border-r border-neutral-800 overflow-y-auto">
        {renderPanel()}
      </div>
    </div>
  );
}