'use client';

import { useTranslation } from '@/lib/i18n/context';
import { usePageTitle } from '@/lib/use-page-title';
import { MatchHistory } from '@/components/match-history';

export function MatchesClient() {
  const { t } = useTranslation();
  usePageTitle(t.matches.pageTitle);

  return (
    <main className="relative flex flex-col items-center min-h-dvh-safe px-6 overflow-x-hidden overflow-y-auto bg-neutral-950 safe-top safe-bottom">
      <div
        aria-hidden
        className="pointer-events-none absolute -top-1/4 left-1/2 -translate-x-1/2 h-[500px] w-[500px] rounded-full opacity-25 blur-3xl"
        style={{
          background:
            'radial-gradient(circle, rgba(254,60,114,0.45) 0%, rgba(0,194,168,0.2) 45%, transparent 75%)',
        }}
      />

      <div className="relative z-10 w-full max-w-sm flex flex-col gap-5 pt-28 pb-24">
        <header className="flex flex-col gap-1.5">
          <h1 className="text-3xl font-extrabold tracking-tight bg-gradient-to-r from-yumder-pink via-pink-400 to-yumder-teal bg-clip-text text-transparent">
            {t.matches.title}
          </h1>
          <p className="text-sm text-neutral-400 leading-relaxed">{t.matches.subtitle}</p>
        </header>

        <MatchHistory />
      </div>
    </main>
  );
}