// src/components/layout/Footer.tsx
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";

export function Footer() {

    const { t } = useTranslation("comp:footer");

    return (
        <footer className="mt-16 border-t dark:border-neutral-800">
            <div className="mx-auto max-w-6xl px-4 py-8 text-sm text-neutral-600 dark:text-neutral-300">
                <div className="flex flex-col gap-6 md:flex-row md:items-center md:justify-between">
                    {/* Legal links */}
                    <nav className="flex flex-wrap items-center gap-x-6 gap-y-3">
                        <Link to="/imprint" className="hover:underline">{t("imprint")}</Link>
                        <Link to="/privacy" className="hover:underline">{t("data_protection")}</Link>
                        <Link to="/cookies" className="hidden hover:underline">{t("cookies")}</Link>
                        <Link to="/contact" className="hidden hover:underline">{t("contact")}</Link>
                    </nav>
                </div>

                <div className="mt-6 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                    <p className="opacity-75">
                        {t("quote")}
                    </p>
                </div>
            </div>
        </footer>
    );
}
