"use client";

import { CreditCard, PlayCircle, Settings, UserSearch, Wand2, type LucideIcon } from "lucide-react";
import { Container } from "@/components/container";
import { useLanguage } from "@/lib/i18n/context";
import type { Dictionary } from "@/lib/i18n/translations";

type ComingSoonPage = keyof Dictionary["app"]["comingSoon"];

const ICONS: Record<ComingSoonPage, LucideIcon> = {
  creators: UserSearch,
  videos: PlayCircle,
  ai: Wand2,
  billing: CreditCard,
  settings: Settings,
};

export function ComingSoon({ page }: { page: ComingSoonPage }) {
  const { t } = useLanguage();
  const copy = t.app.comingSoon[page];
  const Icon = ICONS[page];

  return (
    <div className="flex min-h-[calc(100dvh-4rem)] items-center justify-center bg-radial-spotlight py-16">
      <Container className="flex justify-center">
        <div className="flex max-w-md flex-col items-center gap-4 rounded-2xl border border-border bg-card/60 p-10 text-center glass-panel">
          <span className="flex size-12 items-center justify-center rounded-xl bg-secondary text-primary">
            <Icon className="size-6" />
          </span>
          <h1 className="text-xl font-semibold text-foreground">{copy.title}</h1>
          <p className="text-sm text-muted-foreground">{copy.description}</p>
          <span className="mt-2 inline-flex items-center rounded-full border border-border bg-secondary/60 px-3 py-1 text-xs font-medium tracking-wide text-primary uppercase">
            {t.app.comingSoonBadge}
          </span>
        </div>
      </Container>
    </div>
  );
}