import Link from "next/link";
import { Icons } from "@/components/icons";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export function EmployeeDirectoryHeader() {
  return (
    <div className="flex flex-col gap-3  bg-background/80 px-4 py-4 sm:px-5">
      {/* <div className='text-muted-foreground text-xs font-medium tracking-wide uppercase'>
        Dashboard / Employee Directory
      </div> */}
      <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
        <div className="min-w-0 flex-1 space-y-1">
          <h1 className="text-xl font-semibold tracking-tight sm:text-2xl">
            รายชื่อพนักงานทั้งหมด
          </h1>
          <p className="text-muted-foreground max-w-3xl text-sm">
            เรียกดูข้อมูลพนักงานและข้อมูลชั่วโมงการอบรมรายบุคคล
          </p>
        </div>
        <div className="flex w-full flex-col gap-2 sm:flex-row lg:w-auto lg:justify-end">
          <Link
            href="/dashboard/employee-directory/create"
            className={cn(
              buttonVariants(),
              "w-full shrink-0 whitespace-nowrap sm:w-auto",
            )}
          >
            <Icons.add className="mr-2 h-4 w-4" />
            สร้างรายชื่อพนักงาน
          </Link>
          <Link
            href="/dashboard/import-employees"
            className={cn(
              buttonVariants({ variant: "outline" }),
              "w-full shrink-0 whitespace-nowrap sm:w-auto",
            )}
          >
            <Icons.upload className="mr-2 h-4 w-4" />
            Import รายชื่อพนักงาน
          </Link>
        </div>
      </div>
    </div>
  );
}
