'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-ocean/80 backdrop-blur-md rounded-xl p-1 border border-flow/10">
        <button
          onClick={() => onAddNode('source')}
          className="px-3 py-1.5 text-xs text-flow/70 hover:bg-flow/10 rounded-lg transition-all duration-300 font-light"
          title="Add Source"
        >
          + Source
        </button>
        <button
          onClick={() => onAddNode('pipe')}
          className="px-3 py-1.5 text-xs text-foam/40 hover:bg-foam/5 rounded-lg transition-all duration-300 font-light"
          title="Add Pipe"
        >
          + Pipe
        </button>
        <button
          onClick={() => onAddNode('sink')}
          className="px-3 py-1.5 text-xs text-foam/35 hover:bg-foam/5 rounded-lg transition-all duration-300 font-light"
          title="Add Sink"
        >
          + Sink
        </button>
      </div>

      {/* Presets */}
      <div className="flex gap-1 bg-ocean/80 backdrop-blur-md rounded-xl p-1 border border-flow/10">
        {presets.map((preset, i) => (
          <button
            key={preset.name}
            onClick={() => onLoadPreset(i)}
            className="px-3 py-1.5 text-xs text-foam/40 hover:bg-foam/5 rounded-lg transition-all duration-300 font-light"
          >
            {preset.name}
          </button>
        ))}
      </div>

      {/* Controls */}
      <div className="flex gap-1 bg-ocean/80 backdrop-blur-md rounded-xl p-1 border border-flow/10">
        <button
          onClick={onTogglePlay}
          className="px-3 py-1.5 text-xs text-flow/70 hover:bg-flow/10 rounded-lg transition-all duration-300"
        >
          {isPlaying ? '⏸' : '▶'}
        </button>
        <button
          onClick={onReset}
          className="px-3 py-1.5 text-xs text-anti-green/40 hover:bg-anti-green/10 rounded-lg transition-all duration-300 font-light"
        >
          Reset
        </button>
      </div>
    </div>
  )
}