'use client';

import { useToolStore } from '@/store';
import type { ToolType } from '@/types';
import {
  Pencil,
  Paintbrush,
  Eraser,
  PaintBucket,
  MousePointer,
  Pipette,
  Type,
} from 'lucide-react';
import { cn } from '@/lib/utils';

const tools: { type: ToolType; icon: React.ReactNode; label: string; shortcut: string }[] = [
  { type: 'pencil', icon: <Pencil className="h-5 w-5" />, label: 'Pencil', shortcut: '1' },
  { type: 'brush', icon: <Paintbrush className="h-5 w-5" />, label: 'Brush', shortcut: '2' },
  { type: 'eraser', icon: <Eraser className="h-5 w-5" />, label: 'Eraser', shortcut: '3' },
  { type: 'fill', icon: <PaintBucket className="h-5 w-5" />, label: 'Fill', shortcut: '4' },
  { type: 'eyedropper', icon: <Pipette className="h-5 w-5" />, label: 'Eyedropper', shortcut: '5' },
  { type: 'text', icon: <Type className="h-5 w-5" />, label: 'Text', shortcut: '6' },
  { type: 'select', icon: <MousePointer className="h-5 w-5" />, label: 'Select', shortcut: '7' },
];

export function ToolPalette() {
  const { activeTool, setActiveTool } = useToolStore();

  return (
    <nav
      className="flex flex-col bg-card border-r border-border w-16"
      role="toolbar"
      aria-label="Drawing tools"
    >
      <div className="border-b border-border p-2">
        <h2 className="text-xs font-semibold text-card-foreground text-center">
          Tools
        </h2>
      </div>

      <div className="flex-1 overflow-y-auto p-2 space-y-1">
        {tools.map((tool) => (
          <button
            key={tool.type}
            onClick={() => setActiveTool(tool.type)}
            className={cn(
              'w-full aspect-square flex items-center justify-center rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
              activeTool === tool.type
                ? 'bg-primary text-primary-foreground'
                : 'hover:bg-accent text-muted-foreground hover:text-foreground'
            )}
            aria-label={`${tool.label} (${tool.shortcut})`}
            aria-pressed={activeTool === tool.type}
            title={`${tool.label} (${tool.shortcut})`}
          >
            {tool.icon}
          </button>
        ))}
      </div>
    </nav>
  );
}