"use client";
import usePathSegment from "@/hooks/usePathSegment";
import clsx from "clsx";
import Link from "next/link";
import React from "react";

const Nav = () => {
  const { lastSegment } = usePathSegment();
  console.log(lastSegment);

  const basePath = "/sarax736";

  return (
    <div className="flex justify-around text-neutral-700 text-sm border-b">
      <Link
        href={basePath}
        className={clsx(
          "hover:bg-accent-50 w-full flex justify-center",
          lastSegment.includes("sarax736") ? "font-bold" : "font-semibold"
        )}
      >
        <div className="relative py-3 h-full w-fit items-center">
          <span>Posts</span>
          <span
            className={clsx(
              "h-1 absolute inset-x-0 bottom-0 bg-primary rounded-full",
              !lastSegment.includes("sarax736") && "hidden"
            )}
          ></span>
        </div>
      </Link>
      <Link
        href={basePath + "/replies"}
        className={clsx(
          "hover:bg-accent-50 w-full flex justify-center",
          lastSegment.includes("replies") ? "font-bold" : "font-semibold"
        )}
      >
        <div className="relative py-3 h-full w-fit items-center">
          <span>Replies</span>
          <span
            className={clsx(
              "h-1 absolute inset-x-0 bottom-0 bg-primary rounded-full",
              !lastSegment.includes("replies") && "hidden"
            )}
          ></span>
        </div>
      </Link>
      <Link
        href={basePath + "/media"}
        className={clsx(
          "hover:bg-accent-50 w-full flex justify-center",
          lastSegment.includes("media") ? "font-bold" : "font-semibold"
        )}
      >
        <div className="relative py-3 h-full w-fit items-center">
          <span>Media</span>
          <span
            className={clsx(
              "h-1 absolute inset-x-0 bottom-0 bg-primary rounded-full",
              !lastSegment.includes("media") && "hidden"
            )}
          ></span>
        </div>
      </Link>
      <Link
        href={basePath + "/likes"}
        className={clsx(
          "hover:bg-accent-50 w-full flex justify-center",
          lastSegment.includes("likes") ? "font-bold" : "font-semibold"
        )}
      >
        <div className="relative py-3 h-full w-fit items-center">
          <span>Likes</span>
          <span
            className={clsx(
              "h-1 absolute inset-x-0 bottom-0 bg-primary rounded-full",
              !lastSegment.includes("likes") && "hidden"
            )}
          ></span>
        </div>
      </Link>
    </div>
  );
};

export default Nav;