"use client";

import { Children, cloneElement, type ReactElement } from "react";
import { useTranslation } from "./locale-provider";
import { exportStatLabel, type ExportMessageKey } from "@/lib/guides/export-text";
import type { MessageParams } from "@/lib/i18n/messages";

export function Text({ message, params }: { message: string; params?: MessageParams }) {
  const { t } = useTranslation();
  return t(message, params);
}

export function ExportText({ message, params }: { message: ExportMessageKey; params?: MessageParams }) {
  const { e } = useTranslation();
  return e(message, params);
}

export function StatText({ value }: { value: string }) {
  const { locale } = useTranslation();
  return exportStatLabel(value, locale);
}

export function Localized({ children, attributes }: {
  children: ReactElement;
  attributes: Record<string, string | { message: string; params: MessageParams }>;
}) {
  const { t } = useTranslation();
  const props = Object.fromEntries(Object.entries(attributes).map(([key, value]) => [
    key, typeof value === "string" ? t(value) : t(value.message, value.params),
  ]));
  // Children.toArray resolves lazy children streamed across the server/client boundary.
  const child = Children.only(Children.toArray(children)[0]) as ReactElement;
  return cloneElement(child, props);
}

export function MetricText({ value }: { value: string }) {
  const { locale } = useTranslation();
  return `${Number(value).toLocaleString(locale, { maximumFractionDigits: 2 })}%`;
}

export function SectionTitle({ slug, fallback }: { slug: string; fallback: string }) {
  const { t } = useTranslation();
  const titles: Record<string, string> = { overview: "Overview", weapon: "Weapons", artifact: "Artifacts & Stats", constellations: "Constellations", team: "Team Calc" };
  return titles[slug] ? t(titles[slug]) : fallback;
}

export function ConditionLabel({ name, index }: { name: string | null; index: number }) {
  const { e } = useTranslation();
  return name || e("condition", { index });
}