hidden11/components/ShareResult.tsx

import { useMemo, useState } from "react";
import type { Dictionary } from "@/lib/i18n";
import type { Locale } from "@/lib/i18n";
import { buildShareText } from "@/lib/share";
import type { DailyProgress, GlobalStats } from "@/lib/types";
import StatsPanel from "./StatsPanel";

type ShareResultProps = {
  dateKey: string;
  onClose: () => void;
  progress: DailyProgress;
  locale: Locale;
  quote: { author: string; text: Record<Locale, string> };
  stats: GlobalStats;
  t: Dictionary;
};

export default function ShareResult({ dateKey, locale, onClose, progress, quote, stats, t }: ShareResultProps) {
  const [copied, setCopied] = useState(false);
  const shareText = useMemo(() => buildShareText(dateKey, progress, t), [dateKey, progress, t]);

  async function copy() {
    await navigator.clipboard.writeText(shareText);
    setCopied(true);
    window.setTimeout(() => setCopied(false), 1600);
  }

  return (
    <div className="fixed inset-0 z-50 flex items-end bg-black/70 p-3 backdrop-blur-sm sm:items-center sm:justify-center">
      <div
        className="max-h-[88vh] w-full overflow-hidden rounded-lg border border-white/10 bg-pitch-950 shadow-2xl sm:max-w-lg"
        role="dialog"
        aria-modal="true"
        aria-labelledby="share-title"
      >
        <div className="flex items-center justify-between gap-3 border-b border-white/10 p-4">
          <div>
            <h2 id="share-title" className="text-lg font-black text-white">
              {t.share}
            </h2>
            <p className="mt-0.5 text-sm text-white/55">{t.shareLead}</p>
          </div>
          <button
            type="button"
            onClick={onClose}
            className="h-9 w-9 rounded-full border border-white/15 text-lg font-black text-white transition hover:bg-white/10"
            aria-label={t.closeModal}
          >
            ×
          </button>
        </div>

        <div className="p-4">
          <StatsPanel stats={stats} t={t} />
          <div className="mt-4 rounded-md border border-emerald-300/20 bg-emerald-300/10 p-3">
            <p className="text-sm font-semibold leading-6 text-emerald-50">
              “{quote.text[locale]}”
            </p>
            <p className="mt-1 text-xs font-bold uppercase text-emerald-100/55">{quote.author}</p>
          </div>
          <pre className="mt-4 max-h-[38vh] overflow-auto whitespace-pre-wrap rounded-md bg-black/30 p-3 text-sm leading-6 text-white/85">
            {shareText}
          </pre>
          <button
            type="button"
            onClick={copy}
            className="mt-4 h-11 w-full rounded-md bg-white px-3 text-sm font-black text-pitch-950 transition hover:bg-emerald-100"
          >
            {copied ? t.copied : t.copy}
          </button>
        </div>
      </div>
    </div>
  );
}