'use client';

import Link from 'next/link';
import { Icons } from '@/components/icons';
import { Button } from '@/components/ui/button';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger
} from '@/components/ui/dropdown-menu';

type EmployeeDirectoryActionMenuProps = {
  employeeId: number;
};

export function EmployeeDirectoryActionMenu({ employeeId }: EmployeeDirectoryActionMenuProps) {
  return (
    <DropdownMenu modal={false}>
      <DropdownMenuTrigger asChild>
        <Button
          type='button'
          variant='ghost'
          size='icon'
          className='h-9 w-9 shrink-0'
          aria-label='เมนูจัดการพนักงาน'
        >
          <Icons.ellipsis className='h-4 w-4' />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align='end' sideOffset={8} className='w-52 max-w-[calc(100vw-1rem)]'>
        <DropdownMenuLabel>จัดการ</DropdownMenuLabel>
        <DropdownMenuItem asChild>
          <Link href={`/dashboard/employee-directory/${employeeId}`}>
            <Icons.info className='mr-2 h-4 w-4' />
            ดูข้อมูลพนักงาน
          </Link>
        </DropdownMenuItem>
        <DropdownMenuItem asChild>
          <Link href={`/dashboard/employee-directory/${employeeId}/edit`}>
            <Icons.edit className='mr-2 h-4 w-4' />
            แก้ไขข้อมูลพนักงาน
          </Link>
        </DropdownMenuItem>
        <DropdownMenuItem asChild>
          <Link href={`/dashboard/employee-directory/${employeeId}/targets`}>
            <Icons.award className='mr-2 h-4 w-4' />
            กำหนดเป้าหมาย K/S/A
          </Link>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}
