'use client'

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

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

interface EmployeeEmptyStateProps {
  searchQuery: string
  onShowAddForm: () => void
}

export function EmployeeEmptyState({ searchQuery, onShowAddForm }: EmployeeEmptyStateProps) {
  return (
    <div className="flex items-center justify-center h-64">
      <div className="text-center">
        <div className="w-16 h-16 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-4">
          <Users className="h-8 w-8 text-white/40" />
        </div>
        <h3 className="text-lg font-medium text-white mb-2">
          {searchQuery ? 'Сотрудники не найдены' : 'У вас пока нет сотрудников'}
        </h3>
        <p className="text-white/60 text-sm mb-4">
          {searchQuery ? 'Попробуйте изменить критерии поиска' : 'Добавьте первого сотрудника в вашу команду'}
        </p>
        {!searchQuery && (
          <Button
            onClick={onShowAddForm}
            className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white border-0 shadow-lg shadow-purple-500/25 hover:shadow-purple-500/40 transition-all duration-300"
          >
            <Plus className="h-4 w-4 mr-2" />
            Добавить сотрудника
          </Button>
        )}
      </div>
    </div>
  )
}
