import Link from "next/link";
import React from "react";
import { Button } from "./ui/button";
import LocaleSwitcher from "./locale-switcher";
import { getTranslations } from "next-intl/server";
import { ModeToggle } from "./mode-toggle";

export default async function Footer() {
  const t = await getTranslations("legal.footer");

  return (
    <footer className="container p-4 gap-x-4 flex flex-col md:flex-row items-center ">
      <ModeToggle />
      <span className="text-sm ">
        {t("copyright", {
          year: new Date().getFullYear(),
        })}
      </span>

      <menu className="flex items-center gap-4 mx-4">
        <Button
          asChild
          variant={"link"}
          className="text-muted-foreground text-xs hover:text-foreground px-0 w-max"
        >
          <Link href={t("imprint")}>{t("imprint")}</Link>
        </Button>
        <Button
          asChild
          variant={"link"}
          className="text-muted-foreground text-xs hover:text-foreground px-0 w-max"
        >
          <Link href={t("privacy")}>{t("privacy")}</Link>
        </Button>
      </menu>

      <div className="order-last sm:order-none ml-auto flex items-center gap-4">
        <LocaleSwitcher />
      </div>
    </footer>
  );
}
