import { MousePointer2, Hand, Ruler, Circle, Box, Eye, Gauge } from 'lucide-react';

const TOOLS = [
  { id: 'select', icon: MousePointer2, label: 'Select' },
  { id: 'rotate', icon: Hand, label: 'Rotate / Pan' },
  { id: 'station', icon: Ruler, label: 'Add Measurement Station' },
  { id: 'ring', icon: Circle, label: 'Add Circumference Ring' },
  { id: 'zone', icon: Box, label: 'Add Keep-Out / Access Zone' },
  { id: 'inspect', icon: Eye, label: 'Inspect Object' },
  { id: 'ruler', icon: Gauge, label: 'Ruler' },
];

export default function VerticalToolStrip({ activeTool, onTool }) {
  return (
    <div className="flex w-12 shrink-0 flex-col items-center gap-1 border-r border-white/10 bg-[#0d1318] py-3">
      {TOOLS.map((t) => {
        const Icon = t.icon;
        const active = activeTool === t.id;
        return (
          <button
            key={t.id}
            onClick={() => onTool?.(t.id)}
            title={t.label}
            className={`flex h-10 w-10 items-center justify-center rounded-xl border transition ${
              active
                ? 'border-cyan-400/50 bg-cyan-400/15 text-cyan-300'
                : 'border-transparent text-slate-400 hover:border-white/10 hover:bg-white/5 hover:text-cyan-300'
            }`}
          >
            <Icon className="h-5 w-5" />
          </button>
        );
      })}
    </div>
  );
}