import Link from "next/link";
import { redirect } from "next/navigation";
import { ArrowLeft } from "lucide-react";
import { CosmeticsShop } from "@/components/CosmeticsShop";
import { Footer, Header } from "@/components/Shell";
import { getI18n } from "@/lib/i18n";
import { accountProfile } from "@/lib/profile";
import { profileCosmeticsState } from "@/lib/profile-cosmetics";
import { user } from "@/lib/supabase";

export const dynamic = "force-dynamic";

export async function generateMetadata() {
  const { t } = await getI18n();
  return { title: t("Profile cosmetics") };
}

export default async function CosmeticsPage() {
  const account = await user();
  if (!account) redirect("/log-in?next=%2Fcosmetics");
  const [profile, shop] = await Promise.all([
    accountProfile(account),
    profileCosmeticsState(account.id),
  ]);
  const { t } = await getI18n();

  return (
    <>
      <Header />
      <main className="section page-content">
        <Link className="text-link" href="/dashboard">
          <ArrowLeft size={15} aria-hidden="true" /> {t("My account")}
        </Link>
        <CosmeticsShop
          accountId={account.id}
          avatarPath={profile.avatar_path}
          initialShop={shop}
        />
      </main>
      <Footer />
    </>
  );
}