"use client";
import Link from "next/link";
import Navbar from "./nav-menu";
import { usePathname } from "next/navigation";
import Image from "next/image";
import { Button } from "../ui/button";
import { IoMenuSharp } from "react-icons/io5";
import { useSheet } from "@/lib/hooks/use-sheet";

const Topbar = () => {
  const path = usePathname();
  const { onOpen } = useSheet();
  return (
    <div className="flex lg:py-0 items-center justify-between lg:px-10">
      <div className="z-10">
        <Link href="/">
          <Image src="/assets/logo.svg" height={200} width={200} alt="" />
        </Link>
      </div>
      <div className="hidden lg:block">
        <Navbar />
      </div>
      <div className={`z-10 flex items-center`}>
        <Link
          className={`px-7 sm:block hidden py-5  ${path === "/" ? "bg-white text-colour-1" : "bg-colour-1 text-white"} font-semibold`}
          href="/donate"
        >
          Donate Now
        </Link>
        <div className="lg:hidden z-10">
          <Button className=" hover:bg-transparent text-white py-5 bg-transparent rounded-none" onClick={onOpen}>
            <IoMenuSharp className="h-10 w-10" />
          </Button>
        </div>
      </div>
    </div>
  );
};

export default Topbar;