paint-ui/components/tools/tool-settings.tsx

'use client';

import { useToolStore } from '@/store';
import { Settings2 } from 'lucide-react';

export function ToolSettings() {
  const {
    activeTool,
    settings,
    setSize,
    setOpacity,
    setHardness,
    setColor,
    setFlow,
  } = useToolStore();

  const showSizeOpacity = ['brush', 'eraser', 'pencil'].includes(activeTool);
  const showHardness = ['brush'].includes(activeTool);
  const showColor = ['brush', 'pencil', 'fill'].includes(activeTool);
  const showFlow = ['brush'].includes(activeTool);

  if (!showSizeOpacity && !showColor) {
    return null;
  }

  return (
    <div className="flex flex-col bg-card border-r border-border w-64">
      <div className="border-b border-border p-3">
        <h2 className="flex items-center gap-2 text-sm font-semibold text-card-foreground">
          <Settings2 className="h-4 w-4" />
          Tool Settings
        </h2>
      </div>

      <div className="flex-1 overflow-y-auto p-4 space-y-4">
        {/* Color picker */}
        {showColor && (
          <div className="space-y-2">
            <label className="text-sm font-medium text-card-foreground">
              Color
            </label>
            <input
              type="color"
              value={settings.color}
              onChange={(e) => setColor(e.target.value)}
              className="w-full h-10 rounded-md border border-border cursor-pointer"
            />
            <input
              type="text"
              value={settings.color}
              onChange={(e) => setColor(e.target.value)}
              className="w-full px-3 py-1.5 text-sm rounded-md border border-border bg-background text-foreground"
            />
          </div>
        )}

        {/* Size slider */}
        {showSizeOpacity && (
          <div className="space-y-2">
            <div className="flex justify-between items-center">
              <label className="text-sm font-medium text-card-foreground">
                Size
              </label>
              <span className="text-sm text-muted-foreground">
                {settings.size}px
              </span>
            </div>
            <input
              type="range"
              min="1"
              max="200"
              value={settings.size}
              onChange={(e) => setSize(Number(e.target.value))}
              className="w-full"
            />
          </div>
        )}

        {/* Opacity slider */}
        {showSizeOpacity && (
          <div className="space-y-2">
            <div className="flex justify-between items-center">
              <label className="text-sm font-medium text-card-foreground">
                Opacity
              </label>
              <span className="text-sm text-muted-foreground">
                {Math.round(settings.opacity * 100)}%
              </span>
            </div>
            <input
              type="range"
              min="0"
              max="100"
              value={settings.opacity * 100}
              onChange={(e) => setOpacity(Number(e.target.value) / 100)}
              className="w-full"
            />
          </div>
        )}

        {/* Hardness slider */}
        {showHardness && (
          <div className="space-y-2">
            <div className="flex justify-between items-center">
              <label className="text-sm font-medium text-card-foreground">
                Hardness
              </label>
              <span className="text-sm text-muted-foreground">
                {Math.round(settings.hardness * 100)}%
              </span>
            </div>
            <input
              type="range"
              min="0"
              max="100"
              value={settings.hardness * 100}
              onChange={(e) => setHardness(Number(e.target.value) / 100)}
              className="w-full"
            />
          </div>
        )}

        {/* Flow slider */}
        {showFlow && (
          <div className="space-y-2">
            <div className="flex justify-between items-center">
              <label className="text-sm font-medium text-card-foreground">
                Flow
              </label>
              <span className="text-sm text-muted-foreground">
                {Math.round(settings.flow * 100)}%
              </span>
            </div>
            <input
              type="range"
              min="0"
              max="100"
              value={settings.flow * 100}
              onChange={(e) => setFlow(Number(e.target.value) / 100)}
              className="w-full"
            />
          </div>
        )}
      </div>
    </div>
  );
}