import { Link, useLocation } from 'react-router-dom';
import { KeenIcon } from '@/components/keenicons';
import { toAbsoluteUrl } from '@/utils';
import {
  Menu,
  MenuArrow,
  MenuIcon,
  MenuItem,
  MenuLink,
  MenuSub,
  MenuTitle,
  MenuToggle
} from '@/components/menu';
import { MENU_ROOT } from '@/config';
import { useEffect, useState } from 'react';
import { useLanguage } from '@/i18n';

const HeaderLogo = () => {
  const { pathname } = useLocation();
  const { isRTL } = useLanguage();
  const [selectedMenuItem, setSelectedMenuItem] = useState(MENU_ROOT[0]);

  useEffect(() => {
    MENU_ROOT.forEach((item) => {
      if (item.rootPath && pathname.includes(item.rootPath)) {
        setSelectedMenuItem(item);
      }
    });
  }, [pathname]);

  return (
    // <div className="flex items-center gap-2 lg:gap-5 2xl:-ml-[60px]">
    <div className="flex items-center gap-2 lg:gap-5">
      <Link to="/" className="shrink-0">
        {/* <img
          src={toAbsoluteUrl('/media/app/mini-logo-circle.svg')}
          className="dark:hidden min-h-[42px]"
          alt="logo"
        />
        <img
          src={toAbsoluteUrl('/media/app/mini-logo-circle-dark.svg')}
          className="hidden dark:inline-block min-h-[42px]"
          alt="logo"
        /> */}
        <img
          src={toAbsoluteUrl('/media/app/app-logo.png')}
          className="dark:hidden h-14"
          alt="logo"
        />
        <img
          src={toAbsoluteUrl('/media/app/app-logo.png')}
          className="hidden dark:inline-block min-h-[42px]"
          alt="logo"
        />
      </Link>

      <div className="flex items-center">
        <h3 className="text-gray-50 text-xl hidden md:block">TPAY Dashboard Portal</h3>
      </div>
    </div>
  );
};

export { HeaderLogo };
