'use client';

import Link from 'next/link';
import { useTranslations } from 'next-intl';
import { UserPlus, ArrowLeft } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { PageTransition } from '@/components/layout/page-transition';
import { EmployeeList } from '@/components/hr/employees';

interface EmployeesContentProps {
  locale: string;
}

/**
 * Employees list page content
 * Displays employee table with search and filters
 */
export function EmployeesContent({ locale }: EmployeesContentProps) {
  const t = useTranslations('hr');

  return (
    <PageTransition>
      <div className="space-y-6">
        {/* Header */}
        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
          <div className="flex items-center gap-4">
            <Link href={`/${locale}/hr`}>
              <Button variant="ghost" size="icon">
                <ArrowLeft className="h-4 w-4" />
              </Button>
            </Link>
            <div>
              <h1 className="text-3xl font-bold tracking-tight">
                {t('employees.title')}
              </h1>
              <p className="text-muted-foreground">{t('employees.subtitle')}</p>
            </div>
          </div>
          <Link href={`/${locale}/hr/employees/new`}>
            <Button className="gap-2">
              <UserPlus className="h-4 w-4" />
              {t('newEmployee')}
            </Button>
          </Link>
        </div>

        {/* Employee List */}
        <EmployeeList locale={locale} />
      </div>
    </PageTransition>
  );
}
