"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

import { FiguresMaskedContext } from "@/app/customer/_components/dashboard-overview-layout";

export function DashboardCardExcludeHint({
  excludeCount,
  deductionLabel,
  deductionFormatted,
  className,
}: {
  excludeCount?: number | null;
  deductionLabel?: string | null;
  deductionFormatted?: string | null;
  className?: string;
}) {
  const figuresMasked = React.useContext(FiguresMaskedContext);
  const notes: string[] = [];

  if (excludeCount && excludeCount > 0) {
    notes.push(
      `*excluding ${excludeCount} transaction${excludeCount === 1 ? "" : "s"}`,
    );
  }

  if (deductionFormatted) {
    notes.push(`Excl. ${deductionLabel ?? "adjustment"}: ${figuresMasked ? "*******" : deductionFormatted}`);
  }

  if (notes.length === 0) return null;

  return (
    <div className={cn("space-y-0.5", className)}>
      {notes.map((note) => (
        <p
          key={note}
          className="text-[9px] leading-none text-amber-600 dark:text-amber-400"
        >
          {note}
        </p>
      ))}
    </div>
  );
}