"use client";

import { Changelog } from "@/components/changelog";
import Link from "next/link";
import { Button } from "@/components/ui/button";
import { ArrowLeft } from "lucide-react";
import { useTranslation } from "@/context/i18n-context";

export default function ChangelogPage() {
  const { t } = useTranslation();

  return (
    <div className="relative flex flex-col items-center min-h-screen p-4 sm:p-8 bg-gray-50 dark:bg-background font-[family-name:var(--font-geist-sans)]">
      <div className="w-full max-w-4xl mx-auto">
        <Button asChild variant="ghost" className="mb-4 -ml-4">
          <Link href="/">
            <ArrowLeft className="mr-2 h-4 w-4" />
            {t('changelogPage.back')}
          </Link>
        </Button>
      </div>
      <main className="w-full">
        <Changelog />
      </main>
    </div>
  );
}