import Link from "next/link";
import BlurryDivider from "~/components/blurry_divider";
import { LogoSvg } from "~/components/svgs";
import { useTranslation } from "~/providers/I18nProvider";
export const Footer = () => {
  const { t } = useTranslation();
  return (
    <div className="mt-auto">
      <footer
        aria-label="Site Footer"
        className="bg-muted text-muted-foreground bottom-0 z-40 w-full"
      >
        <div className="mx-auto max-w-6xl px-4 py-6 sm:px-6 lg:px-8">
          <div className="text-center">
            <Link
              href="/"
              aria-label="footerLogo"
              className="flex items-center justify-center text-3xl font-bold tracking-wide antialiased"
            >
              <LogoSvg className="h-12 w-auto [&>g]:fill-red-500 dark:[&>g]:fill-neutral-100 [&>text]:fill-neutral-600 [&>text]:stroke-neutral-600 dark:[&>text]:fill-neutral-100 dark:[&>text]:stroke-neutral-100" />
            </Link>
          </div>

          <nav aria-label="Footer Nav" className="mt-6">
            <ul className="flex flex-wrap justify-center gap-6 md:gap-8 lg:gap-12">
              <li>
                <Link
                  className="text-sm"
                  href="/guida"
                  aria-label="footerGuida"
                >
                  {t.footer.Guida}
                </Link>
              </li>

              <li>
                <Link
                  className="text-sm"
                  href="/chi-siamo"
                  aria-label="footerChiSiamo"
                >
                  {t.footer["Chi Siamo"]}
                </Link>
              </li>

              <li>
                <Link
                  className="text-sm"
                  href="/termini-condizioni"
                  aria-label="footerTerminiCondizioni"
                >
                  {t.termini_condizioni_title}
                </Link>
              </li>
              <li>
                <Link
                  className="text-sm"
                  href="/privacy-policy"
                  aria-label="footerPrivacyPolicy"
                >
                  {t.privacy_policy_title}
                </Link>
              </li>
            </ul>
          </nav>
          <div className="py-4">
            <BlurryDivider />
          </div>

          <div className="text-center text-xs">
            <p>{t.footer.endtxt}</p>
            <p>{t.footer.endtxt2}</p>
          </div>
        </div>
      </footer>
    </div>
  );
};
export const MiniFooter = () => {
  const { t } = useTranslation();
  return (
    <div className="mt-auto flex w-full">
      <footer
        aria-label="Site Footer"
        className="dark:bg-primary z-40 w-full bg-neutral-100 text-neutral-700 dark:text-white"
      >
        <div className="mx-auto max-w-5xl px-2 py-2 sm:px-6 lg:px-8">
          <div className="text-center">
            <Link
              aria-label="footerLogo"
              href="/"
              className="text-2xl font-bold tracking-wide antialiased"
            >
              Infoalloggi.it
            </Link>
          </div>

          <div className="mt-2 text-center text-xs">
            <p>{t.footer.endtxt}</p>
            <p>{t.footer.endtxt2}</p>
          </div>
        </div>
      </footer>
    </div>
  );
};
