import { useTranslation } from "next-i18next";
import Link from "next/link";
const Footer = () => {
  const { t: translate } = useTranslation();

  return (
    <>
      <div className="layout w-full bg-zinc-800 text-sm py-8 sm:py-14">
        <div className="sm:flex object-contain justify-between">
          <div className="sm:flex sm:flex-col justify-between">
            <p className="font-cooperBold text-zinc-100 text-xl tracking-widest mb-4">
              AMSI
            </p>
            <p className="hidden sm:inline md:hidden text-zinc-100">
              {translate("footer.rights")}
            </p>
          </div>
          <div className="text-left flex flex-col justify-center md:hidden sm:text-right text-zinc-400">
            <p className="mb-2 sm:mb-6 hover:text-zinc-200 cursor-pointer transition ease-in-out duration-200">
              {translate("footer.legal")}
            </p>
            <Link href="/privacy-policy">
              <p className="mb-2 sm:mb-6 hover:text-zinc-200 cursor-pointer transition ease-in-out duration-200">
                {translate("footer.privacy")}
              </p>
            </Link>

            <p className="mb-4 sm:mb-0 hover:text-zinc-200 cursor-pointer transition ease-in-out duration-200">
              {translate("footer.cookies")}
            </p>
          </div>
          <div className="sm:hidden">
            <p className="sm:hidden text-zinc-100">
              {translate("footer.rights")}
            </p>
          </div>
        </div>

        <div className="flex items-center justify-between text-zinc-100 mt-10 mb:mt-20">
          {/* <Image
            className="cursor-pointer h-12 w-12 my-2 py-2 text-zinc-100 hover:bg-red-700 rounded-full transition ease-in-out duration-200"
            src={linkedin}
            alt="linkedin"
          /> */}
          <p className="hidden md:block"> {translate("footer.rights")}</p>
          <div className="hidden md:flex justify-end text-zinc-400">

            <Link href="/legal">
            <p className="mr-4 hover:text-zinc-200 cursor-pointer transition ease-in-out duration-200">
              {translate("footer.legal")}
            </p>
            </Link>
            <Link href="/privacy-policy">
              <p className="mr-4 hover:text-zinc-200 cursor-pointer transition ease-in-out duration-200">
                {translate("footer.privacy")}
              </p>
            </Link>
            <Link href="/cookies">
            <p className="hover:text-zinc-200 cursor-pointer transition ease-in-out duration-200">
              {translate("footer.cookies")}
            </p>
            </Link>
            
          </div>
        </div>
      </div>
    </>
  );
};

export default Footer;
