import { cookies } from "next/headers";
import { getLocale, LOCALE_COOKIE, t } from "@/lib/i18n";

export default async function Loading() {
  const locale = getLocale((await cookies()).get(LOCALE_COOKIE)?.value);

  return (
    <main className="min-h-screen animate-pulse bg-slate-50" aria-busy="true">
      <div className="bg-gradient-to-r from-sky-900 via-cyan-800 to-cyan-600 text-white shadow-lg">
        <div className="mx-auto max-w-7xl px-6 py-12">
          <div className="h-10 w-80 rounded-lg bg-white/20" />
          <div className="mt-4 h-5 max-w-2xl rounded bg-white/15" />
          <div className="mt-6 h-10 w-24 rounded-lg bg-white/20" />
        </div>
      </div>

      <div className="mx-auto max-w-7xl px-6 py-10">
        <div className="mb-6 inline-flex rounded-2xl bg-white p-6 shadow-md ring-1 ring-slate-200">
          <div>
            <div className="h-4 w-32 rounded bg-slate-200" />
            <div className="mt-2 h-9 w-12 rounded bg-cyan-100" />
          </div>
        </div>

        <div className="overflow-hidden rounded-2xl bg-white shadow-lg ring-1 ring-slate-200">
          <div className="border-b border-slate-200 px-6 py-4">
            <div className="h-6 w-28 rounded bg-slate-200" />
          </div>

          <div className="flex items-center justify-center gap-3 px-6 py-8 text-sm text-slate-500">
            <span className="h-5 w-5 rounded-full border-2 border-cyan-200 border-t-cyan-600 motion-safe:animate-spin" />
            {t(locale, "articles.loading")}
          </div>

          <div className="space-y-5 px-6 pb-8">
            {[...Array(7)].map((_, index) => (
              <div key={index} className="flex gap-6">
                <div className="h-5 w-32 rounded bg-slate-200" />
                <div className="h-5 flex-1 rounded bg-slate-200" />
              </div>
            ))}
          </div>
        </div>
      </div>
    </main>
  );
}