"use client";

import { motion } from "framer-motion";
import { Heart } from "lucide-react";
import { useTranslations } from "next-intl";

import { Container } from "@/components/layout/container";
import { AppCard } from "@/components/ui/app-card";
import { AppLocale } from "@/lib/locale";

type SiteFooterProps = {
  defaultLocale: AppLocale;
};

export function SiteFooter({ defaultLocale }: SiteFooterProps) {
  void defaultLocale;
  const tFooter = useTranslations("footer");

  return (
    <footer className="border-t border-border/70 bg-background/95">
      <Container className="py-8 sm:py-10">
        <AppCard className="transition-transform duration-300 hover:-translate-y-0.5" level={1}>
          <div className="flex items-center justify-center text-center">
            <p className="flex flex-wrap items-center justify-center gap-2 text-sm text-muted-foreground">
              <span>{tFooter("line.rights", { year: new Date().getFullYear() })}</span>
              <span className="text-border-strong">•</span>
              <span>{tFooter("line.madeBefore")}</span>
              <motion.span
                animate={{ scale: [1, 1.12, 1, 1.2, 1] }}
                transition={{ duration: 1.25, ease: "easeInOut", repeat: Number.POSITIVE_INFINITY }}
                className="inline-flex"
              >
                <Heart
                  className="h-4 w-4 fill-red-500 text-red-500"
                  aria-hidden="true"
                />
              </motion.span>
              <span>{tFooter("line.madeAfter")}</span>
            </p>
          </div>
        </AppCard>
      </Container>
    </footer>
  );
}