import { Link, Sheet, Typography } from "@mui/joy";
import { useTranslation } from "react-i18next";
import qrCode from "../assets/Portfolio-QR-Code.png";

export const PageFooter = () => {
  const { t } = useTranslation();

  return (
    <footer className="w-full mt-auto px-3 pb-3">
      <Sheet
        variant="soft"
        className="mx-auto w-full max-w-3xl rounded-2xl border border-slate-200/70 bg-white/80 backdrop-blur"
      >
        <div className="flex flex-col gap-2 p-2.5 sm:p-3">
          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <Typography
              level="title-sm"
              className="text-slate-800 tracking-wide sm:pr-4"
            >
              {t("footer-headline")}
              <Link
                href="https://portfolio-theis.de/"
                target="_blank"
                rel="noreferrer"
                className="ml-2 inline-flex items-center text-slate-700 underline decoration-slate-300 underline-offset-4 hover:text-slate-900"
              >
                portfolio-theis.de
              </Link>
            </Typography>
            <div className="flex items-center justify-center sm:justify-end sm:flex-none">
              <img
                src={qrCode}
                alt="https://portfolio-theis.de/"
                className="h-20 w-20 shrink-0 rounded-md border border-slate-200 object-contain"
              />
            </div>
          </div>
        </div>
      </Sheet>
    </footer>
  );
};