"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { CalendarIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export function CalendarNav() {
  const pathname = usePathname();
  const isActive = pathname === "/calendar";

  return (
    <Link
      href="/calendar"
      className={cn(
        "flex items-center gap-3 rounded-lg px-3 py-2 text-gray-500 transition-all hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50",
        isActive && "bg-gray-100 text-gray-900 dark:bg-gray-800 dark:text-gray-50"
      )}
    >
      <CalendarIcon className="h-4 w-4" />
      <span>Calendrier</span>
    </Link>
  );
}