import { Logo } from "@/components/logo";
import Link from "next/link";
import { ChangelogPanel } from "@/components/changelog-panel";
import type { ChangelogRelease } from "@/lib/changelog-types";
import { type } from "@/lib/typography";
import { cn } from "@/lib/utils";

const links = [
  {
    title: "درباره ما",
    href: "/about",
  },
  {
    title: "دانشنامه",
    href: "/blog",
  },
  {
    title: "راه حل‌ها",
    href: "/solutions",
  },
];

export default function FooterSection({
  releases,
}: {
  releases: ChangelogRelease[];
}) {
  return (
    <footer className="py-16 md:py-16 bg-muted border-t">
      <div className="mx-auto max-w-5xl px-6 flex items-center flex-col">
        <Logo hasCaption className="mx-auto" />

        <div className={cn("my-4 flex flex-wrap justify-center gap-6", type.link)}>
          {links.map((link, index) => (
            <Link
              key={index}
              href={link.href}
              className="text-muted-foreground hover:text-accent transition-colors duration-150"
            >
              <span>{link.title}</span>
            </Link>
          ))}
        </div>
        <span className={cn(type.link, "block text-center")}>
          © 1404 فیپ، تمامی حقوق محفوظ است
        </span>
        <ChangelogPanel releases={releases} />
      </div>
    </footer>
  );
}