'use client'

import { Users, Plus, Layout, LayoutGrid } from 'lucide-react'

import { Button } from '@/components/ui/button'

interface EmployeeHeaderProps {
  showAddForm: boolean
  showCompactForm: boolean
  onToggleAddForm: () => void
  onToggleFormType: () => void
}

export function EmployeeHeader({
  showAddForm,
  showCompactForm,
  onToggleAddForm,
  onToggleFormType,
}: EmployeeHeaderProps) {
  return (
    <div className="flex items-center justify-between mb-6">
      <div className="flex items-center gap-3">
        <Users className="h-8 w-8 text-purple-400" />
        <div>
          <h1 className="text-2xl font-bold text-white">Управление сотрудниками</h1>
          <p className="text-white/70">Личные данные, табель работы и учет</p>
        </div>
      </div>

      <div className="flex items-center gap-3">
        {showAddForm && (
          <Button
            onClick={onToggleFormType}
            variant="outline"
            size="sm"
            className="border-white/20 text-white/80 hover:bg-white/10 hover:text-white transition-all duration-300"
          >
            {showCompactForm ? (
              <>
                <LayoutGrid className="h-4 w-4 mr-2" />
                Полная форма
              </>
            ) : (
              <>
                <Layout className="h-4 w-4 mr-2" />
                Компактная форма
              </>
            )}
          </Button>
        )}

        <Button
          onClick={onToggleAddForm}
          className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white border-0 shadow-lg shadow-purple-500/25 transition-all duration-300"
        >
          <Plus className="h-4 w-4 mr-2" />
          {showAddForm ? 'Скрыть форму' : 'Добавить сотрудника'}
        </Button>
      </div>
    </div>
  )
}
