import Link from "next/link";
import { Github, Twitter } from "lucide-react";
import { Button } from "@/components/ui/button";
import { changelogData } from "@/lib/changelog-data";
import { ThemeToggle } from "./theme-toggle";

export function Footer() {
  const latestVersion = changelogData[0]?.version;

  return (
    <footer className="w-full border-t bg-background">
      <div className="relative mx-auto flex h-16 w-full max-w-6xl items-center justify-between px-4 md:px-6">
        <div className="text-sm text-muted-foreground">
          <p>© {new Date().getFullYear()} Pascal Linxweiler</p>
        </div>

        <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center gap-1">
          <Button variant="ghost" size="icon" asChild>
            <Link href="https://github.com/" target="_blank" rel="noopener noreferrer" aria-label="GitHub">
              <Github className="h-4 w-4" />
            </Link>
          </Button>
          <Button variant="ghost" size="icon" asChild>
            <Link href="https://x.com/" target="_blank" rel="noopener noreferrer" aria-label="Twitter">
              <Twitter className="h-4 w-4" />
            </Link>
          </Button>
          <ThemeToggle />
        </div>

        <div className="flex items-center gap-4 text-sm text-muted-foreground">
          <Link href="/imprint" className="hover:text-primary transition-colors">Impressum</Link>
          <Link href="/privacy" className="hover:text-primary transition-colors">Datenschutz</Link>
          {latestVersion && (
            <Link
              href="/changelog"
              className="hover:text-primary transition-colors"
            >
              v{latestVersion}
            </Link>
          )}
        </div>
      </div>
    </footer>
  );
}