'use client';

import { usePathname } from 'next/navigation';
import Link from 'next/link';

const linkCSS = 'hover:underline hover:decoration-red-700 hover:underline-offset-4 text-xs xl:text-base';

const Tooltip = ({ pathname }: { pathname: string }) => {
  const css = pathname.startsWith('/ews')
    ? 'group relative inline-block hover:cursor-pointer duration-300 underline decoration-red-700 underline-offset-4 text-xs xl:text-base'
    : 'group relative inline-block hover:cursor-pointer duration-300 text-xs xl:text-base';

  return (
    <div>
      <div className={css}>
        Erdwärmesonden
        <div className="absolute hidden group-hover:flex -top-3 text-sm w-fit py-px bg-white z-50">
          <ul>
            <li>
              <Link href="/ews/grundlagenkarte" className={linkCSS}>
                Grundlagenkarte
              </Link>
            </li>
            <li>
              <Link href="/ews/potenzialberechnung" className={linkCSS}>
                Potenzialberechnung
              </Link>
            </li>
          </ul>
        </div>
      </div>
    </div>
  );
};

export default function Navigation() {
  const pathname = usePathname();
  const decoration = 'underline decoration-red-700 underline-offset-4 text-xs xl:text-base';

  return (
    <div className="hidden md:block lg:pl-32 md:flex md:justify-start gap-x-8 xl:gap-x-10 text-xs xl:text-base">
      <Link href="/" className={pathname === '/' ? decoration : linkCSS}>
        Home
      </Link>
      <Tooltip pathname={pathname}></Tooltip>
      <Link href="/gwwp" className={pathname === '/gwwp' ? decoration : linkCSS}>
        Grundwasserwärmepumpen
      </Link>
      <Link href="/daten" className={pathname === '/daten' ? decoration : linkCSS}>
        Daten
      </Link>
      <Link href="/about" className={pathname === '/about' ? decoration : linkCSS}>
        About
      </Link>
    </div>
  );
}