"use client";

import { Typography } from "@material-tailwind/react";

import { ROUTES } from "../constants/routes";
import { _useScopedI18n } from "../i18n/client";
import { BrandIcon } from "./icons/BrandIcon";

export function Footer() {
  //
  const scopeT = _useScopedI18n("sharedComponents.footerComponent");
  const currentYear = new Date().getFullYear();

  return (
    <>
      <footer
        className="bg-white rounded-none fixed bottom-0 z-[9999]
                p-3 lg:p-5 gap-3 lg:gap-5
                flex flex-col items-center
                xl:flex xl:flex-row xl:justify-between xl:items-center
                w-full left-0
                lg:w-[calc(100%-190px)] lg:left-[190px]
                xl:w-[calc(100%-215px)] xl:left-[215px]
                "
      >
        <div className="flex flex-col md:flex-row md:items-center gap-2 md:gap-10 ">
          <div>
            <a href="/products">
              <div className="flex items-baseline justify-center gap-2 w-28 mx-auto">
                <BrandIcon width={120} height={34} />
              </div>
            </a>
          </div>
          <ul className="flex gap-3 lg:gap-5 items-center text-center">
            <li>
              <a
                href={ROUTES.dashboard.termsAndConditions}
                className="text-xs md:text-sm font-medium text-black-400 hover:text-purple-500 hover:underline"
                target="_blank"
              >
                {scopeT("termsAndC")}
              </a>
            </li>
            <li>
              <a
                href={ROUTES.dashboard.privacyPolicy}
                className="text-xs md:text-sm font-medium text-black-400 hover:text-purple-500 hover:underline"
                target="_blank"
              >
                {scopeT("privacy")}
              </a>
            </li>
            <li>
              <a
                href={ROUTES.dashboard.riskDisclosure}
                className="text-xs md:text-sm font-medium text-black-400 hover:text-purple-500 hover:underline"
                target="_blank"
              >
                {scopeT("risk")}
              </a>
            </li>
          </ul>
        </div>

        <Typography className="text-xs md:text-sm font-medium text-gray-500 text-center">
          COPYRIGHT ©{currentYear} | HMall Technologies LTD All Rights Reserved
        </Typography>
      </footer>
    </>
  );
}
