import type { JSX, ComponentType } from 'react';
import { 
  FileText, 
  Users, 
  Image, 
  LayoutGrid, 
  MessageSquare, 
  Download,
  Globe
} from 'lucide-react';
import { cn } from '@/lib/utils';

interface NavItem {
  id: string;
  label: string;
  icon: ComponentType<{ className?: string }>;
}

const navItems: NavItem[] = [
  { id: 'story', label: 'Story', icon: FileText },
  { id: 'characters', label: 'Characters', icon: Users },
  { id: 'panels', label: 'Panels', icon: Image },
  { id: 'layout', label: 'Layout', icon: LayoutGrid },
  { id: 'bubbles', label: 'Speech', icon: MessageSquare },
  { id: 'export', label: 'Export', icon: Download },
  { id: 'community', label: 'Community', icon: Globe },
];

interface SidebarProps {
  activeSection: string;
  onSectionChange: (section: string) => void;
}

export function Sidebar({ activeSection, onSectionChange }: SidebarProps): JSX.Element {
  return (
    <aside className="w-16 border-r bg-muted/50 flex flex-col items-center py-4 gap-2 shrink-0">
      {navItems.map((item) => {
        const Icon = item.icon;
        const isActive = activeSection === item.id;
        
        return (
          <button
            key={item.id}
            onClick={() => onSectionChange(item.id)}
            className={cn(
              'w-12 h-12 rounded-lg flex items-center justify-center transition-colors relative group',
              isActive 
                ? 'bg-primary text-primary-foreground' 
                : 'text-muted-foreground hover:bg-muted hover:text-foreground'
            )}
            title={item.label}
          >
            <Icon className="w-5 h-5" />
            
            {/* Tooltip */}
            <span className="absolute left-full ml-2 px-2 py-1 bg-popover text-popover-foreground text-xs rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
              {item.label}
            </span>
          </button>
        );
      })}
    </aside>
  );
}
