'use client'

type ToolbarProps = {
  onAddDialogue: () => void
  onAddChoice: () => void
  onAddVariable: () => void
  onSave: () => void
  onExport: () => void
  onImport: () => void
  onProjectSettings: () => void
}

export default function Toolbar({
  onAddDialogue,
  onAddChoice,
  onAddVariable,
  onSave,
  onExport,
  onImport,
  onProjectSettings,
}: ToolbarProps) {
  return (
    <div className="flex items-center justify-between border-b border-zinc-200 bg-zinc-50 px-4 py-2 dark:border-zinc-700 dark:bg-zinc-800">
      <div className="flex items-center gap-2">
        <span className="mr-2 text-sm font-medium text-zinc-500 dark:text-zinc-400">
          Add Node:
        </span>
        <button
          onClick={onAddDialogue}
          className="rounded bg-blue-500 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-800"
        >
          Dialogue
        </button>
        <button
          onClick={onAddChoice}
          className="rounded bg-green-500 px-3 py-1.5 text-sm font-medium text-white hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-800"
        >
          Choice
        </button>
        <button
          onClick={onAddVariable}
          className="rounded bg-orange-500 px-3 py-1.5 text-sm font-medium text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-800"
        >
          Variable
        </button>
      </div>

      <div className="flex items-center gap-2">
        <button
          onClick={onProjectSettings}
          className="rounded border border-zinc-300 bg-white px-3 py-1.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600 dark:focus:ring-offset-zinc-800"
        >
          Project Settings
        </button>
        <button
          onClick={onSave}
          className="rounded border border-zinc-300 bg-white px-3 py-1.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600 dark:focus:ring-offset-zinc-800"
        >
          Save
        </button>
        <button
          onClick={onExport}
          className="rounded border border-zinc-300 bg-white px-3 py-1.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600 dark:focus:ring-offset-zinc-800"
        >
          Export
        </button>
        <button
          onClick={onImport}
          className="rounded border border-zinc-300 bg-white px-3 py-1.5 text-sm font-medium text-zinc-700 hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-zinc-600 dark:bg-zinc-700 dark:text-zinc-200 dark:hover:bg-zinc-600 dark:focus:ring-offset-zinc-800"
        >
          Import
        </button>
      </div>
    </div>
  )
}