"use client";

import { haptic } from "@/lib/haptics";
import { useI18n } from "@/lib/i18n";
import { reportQuestion, unreportQuestion } from "@/lib/question-reports";
import type { Activity, Deck } from "@/lib/schemas";
import { showToast } from "@/lib/toast";

/**
 * The red "!" report control in the feed chrome: records the question, sends
 * the operator a copy and skips past it. Undo lives in the toast.
 */
export function ReportQuestionButton({
  deck,
  activity,
  onSkip,
}: {
  deck: Deck;
  activity: Activity;
  onSkip: () => void;
}) {
  const { t } = useI18n();

  return (
    <button
      type="button"
      onClick={() => {
        haptic("tap");
        reportQuestion({ deck, activity });
        showToast({
          message: t("feed.reported"),
          actionLabel: t("toast.undo"),
          onAction: () => unreportQuestion(deck.id, activity.id),
        });
        onSkip();
      }}
      aria-label={t("feed.report")}
      title={t("feed.report")}
      className="grid size-9 shrink-0 place-items-center rounded-xl border-2 border-rose-400/80 text-[15px] font-black leading-none text-rose-600 transition hover:bg-rose-50 dark:border-rose-400/50 dark:text-rose-300 dark:hover:bg-rose-400/10"
    >
      <span aria-hidden>!</span>
    </button>
  );
}