import { Button } from '@/components/ui/button'
import { Template } from '@/type/template'
import { ArrowLeft, FileText, Settings, Wrench } from 'lucide-react'
import React from 'react'
import { useNavigate } from 'react-router-dom'

interface HeaderBarProps {
  template: Template
  onBack: () => void
}

export const HeaderBar: React.FC<HeaderBarProps> = ({ template, onBack }) => {
  const navigate = useNavigate()

  return (
    <div className="flex-shrink-0 border-b bg-card px-4 py-1">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <Button variant="ghost" size="icon" onClick={onBack}>
            <ArrowLeft className="h-4 w-4" />
          </Button>
          <div className="flex items-center space-x-2">
            <Settings className="h-5 w-5" />
            <h1 className="text-lg font-semibold">Редактор шаблонов</h1>
            <span className="text-sm text-muted-foreground">—</span>
            <span className="text-sm text-muted-foreground">
              {template.name}
            </span>
          </div>
        </div>
        <div className="flex gap-2">
          <Button
            variant="outline"
            size="sm"
            onClick={() => navigate(`/templates/${template.id}/elements`)}
            className="flex items-center gap-2"
          >
            <Wrench className="h-3.5 w-3.5" />
            Элементы интерфейса
          </Button>
          <Button
            variant="outline"
            size="sm"
            onClick={() => navigate(`/templates/${template.id}/protocols`)}
            className="flex items-center gap-2"
          >
            <FileText className="h-3.5 w-3.5" />
            Создать протокол
          </Button>
        </div>
      </div>
    </div>
  )
}