"use client";
import { Search } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { useEffect, useState } from "react";
import { Button } from "../ui/button";
import { usePathname } from "next/navigation";

export default function Navbar() {
  const [date, setDate] = useState("");
  const pathname = usePathname();

  // cek apakah sedang di halaman auth
  const isAuthPage = pathname.startsWith("/auth");

  useEffect(() => {
    const today = new Date();
    const options: Intl.DateTimeFormatOptions = {
      day: "numeric",
      month: "long",
      year: "numeric",
    };
    const formattedDate = today.toLocaleDateString("id-ID", options);
    setDate(formattedDate);
  }, []);

  return (
    <div className="w-full bg-white pt-5 mt-0 border-b-2 mb-2">
      <div className="flex items-center max-w-screen-full mx-3 md:mx-auto mb-3 p-3">
        <Link href={"/"}>
          <div className="flex items-center mr-6 mx-1">
            <Image
              src="/campaign.png"
              alt="Kritik Tajam Logo"
              width={60}
              height={70}
            />
          </div>
        </Link>
        {/* Spacer to push search icon to the right */}
        <div className="flex-grow" />

        {/* Search Icon */}
        {!isAuthPage && (
          <div className="text-xl cursor-pointer mr-1 gap-3 flex">
            <Link href={"/auth/registration"}>
              <Button variant={"ghost"} className="text-[#A3712A]">
                Register
              </Button>
            </Link>
            <Link href={"/auth"}>
              <Button
                variant={"outline"}
                className="border rounded-xl border-[#A3712A] text-[#A3712A]"
              >
                Login
              </Button>
            </Link>
          </div>
        )}
      </div>
    </div>
  );
}