'use client'

import { presets } from './presets'

interface FlowToolbarProps {
  onAddNode: (type: 'source' | 'pipe' | 'sink') => void
  onLoadPreset: (index: number) => void
  onReset: () => void
  isPlaying: boolean
  onTogglePlay: () => void
}

export default function FlowToolbar({
  onAddNode,
  onLoadPreset,
  onReset,
  isPlaying,
  onTogglePlay,
}: FlowToolbarProps) {
  return (
    <div className="absolute top-4 left-4 z-10 flex flex-wrap gap-2">
      {/* Add nodes */}
      <div className="flex gap-1 bg-nothing/80 backdrop-blur-sm rounded-lg p-1 border border-zen/10">
        <button
          onClick={() => onAddNode('source')}
          className="px-3 py-1.5 text-xs text-flow-green/70 hover:bg-flow-green/10 rounded transition-colors"
          title="Add Source"
        >
          + Source
        </button>
        <button
          onClick={() => onAddNode('pipe')}
          className="px-3 py-1.5 text-xs text-zen/50 hover:bg-zen/10 rounded transition-colors"
          title="Add Pipe"
        >
          + Pipe
        </button>
        <button
          onClick={() => onAddNode('sink')}
          className="px-3 py-1.5 text-xs text-zen/40 hover:bg-zen/10 rounded transition-colors"
          title="Add Sink"
        >
          + Sink
        </button>
      </div>

      {/* Presets */}
      <div className="flex gap-1 bg-nothing/80 backdrop-blur-sm rounded-lg p-1 border border-zen/10">
        {presets.map((preset, i) => (
          <button
            key={preset.name}
            onClick={() => onLoadPreset(i)}
            className="px-3 py-1.5 text-xs text-zen/50 hover:bg-zen/10 rounded transition-colors"
          >
            {preset.name}
          </button>
        ))}
      </div>

      {/* Controls */}
      <div className="flex gap-1 bg-nothing/80 backdrop-blur-sm rounded-lg p-1 border border-zen/10">
        <button
          onClick={onTogglePlay}
          className="px-3 py-1.5 text-xs text-flow-green/70 hover:bg-flow-green/10 rounded transition-colors"
        >
          {isPlaying ? '⏸' : '▶'}
        </button>
        <button
          onClick={onReset}
          className="px-3 py-1.5 text-xs text-anti-green/50 hover:bg-anti-green/10 rounded transition-colors"
        >
          Reset
        </button>
      </div>
    </div>
  )
}
