import { Bell, Box, Cloud, Code, Cpu, Database, GitBranch, Globe, Layers, Lock, Play } from 'lucide-react';

const ICONS = { Bell, Box, Cloud, Code, Cpu, Database, GitBranch, Globe, Layers, Lock, Play };

export default function WorkflowToolbar({ templates, onDragStart }) {
  const categories = [...new Set(templates.map((template) => template.category))];
  return (
    <aside className="hidden w-60 flex-shrink-0 overflow-y-auto border-r border-white/10 bg-[#0a0f1a]/95 p-3 md:block">
      <div className="border-b border-white/10 pb-3">
        <p className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">Node Palette</p>
      </div>
      <div className="mt-4 space-y-5">
        {categories.map((category) => (
          <div key={category}>
            <p className="mb-2 text-[10px] uppercase tracking-[0.18em] text-slate-600">{category}</p>
            <div className="space-y-1">
              {templates
                .filter((template) => template.category === category)
                .map((template) => {
                  const Icon = ICONS[template.iconName] || Cpu;
                  return (
                    <div
                      key={template.type}
                      draggable
                      onDragStart={(event) => onDragStart(event, template)}
                      className="flex cursor-grab items-center gap-2 rounded-lg border border-transparent p-2 text-xs text-slate-300 transition-colors hover:border-white/10 hover:bg-white/5"
                    >
                      <span className="flex h-7 w-7 items-center justify-center rounded-md" style={{ background: `${template.color}20` }}>
                        <Icon className="h-3.5 w-3.5" style={{ color: template.color }} />
                      </span>
                      {template.label}
                    </div>
                  );
                })}
            </div>
          </div>
        ))}
      </div>
    </aside>
  );
}