/**
 * earth-now.co
 * Author:  Simon-Pierre Boucher
 * Contact: contact@spboucher.ai
 * File:    apps/web/components/EmbedCounter.tsx
 * Purpose: Client wrapper for /embed/[id] — one fullscreen LiveCounter with a fixed locale and a tiny earth-now.co attribution link
 */

"use client";

import { useMemo, useState } from "react";
import type { CounterModel, CounterWindow } from "@earth-now/counter";
import type { Locale, MetricSummary } from "@/lib/api";
import { I18nProvider } from "@/lib/i18n";
import LiveCounter from "./LiveCounter";

export interface EmbedCounterProps {
  metric: MetricSummary;
  model?: CounterModel | undefined;
  window: CounterWindow;
  locale: Locale;
}

export default function EmbedCounter({ metric, model, window: win, locale }: EmbedCounterProps) {
  // Locale is fixed by the ?lang= query — the toggle just satisfies the provider contract.
  const [embedLocale, setEmbedLocale] = useState<Locale>(locale);
  // Session window in an embed = since the iframe loaded.
  const sessionStart = useMemo(() => Date.now(), []);

  return (
    <I18nProvider locale={embedLocale} setLocale={setEmbedLocale}>
      <div className="fixed inset-0 z-50 flex items-center justify-center bg-page p-4">
        <div className="w-full max-w-xl">
          <LiveCounter
            metric={metric}
            model={model}
            window={win}
            sessionStart={sessionStart}
            size="display"
          />
        </div>
        <a
          href="https://earth-now.co"
          target="_blank"
          rel="noreferrer"
          className="absolute bottom-2 right-3 text-[10px] text-muted hover:text-ink2"
        >
          earth-now.co
        </a>
      </div>
    </I18nProvider>
  );
}