'use client';

import Link from 'next/link';
import { useTranslations } from 'next-intl';
import { ArrowLeft } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { PageTransition } from '@/components/layout/page-transition';
import { OrgChart } from '@/components/hr/employees';

interface OrgChartContentProps {
  locale: string;
}

/**
 * Organization chart page content
 * Displays hierarchical tree view of employees
 */
export function OrgChartContent({ locale }: OrgChartContentProps) {
  const t = useTranslations('hr');

  return (
    <PageTransition>
      <div className="space-y-6">
        {/* Header */}
        <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('orgChart.title')}
            </h1>
            <p className="text-muted-foreground">{t('orgChart.subtitle')}</p>
          </div>
        </div>

        {/* Org Chart */}
        <Card>
          <CardContent className="pt-6">
            <OrgChart locale={locale} />
          </CardContent>
        </Card>
      </div>
    </PageTransition>
  );
}
