import { ArrowDownToLine, ArrowUpFromLine } from "lucide-react";
import { RecordPeriodTotals } from "./types";

interface RecordSummarySectionProps {
  direction: "incoming" | "outgoing";
  totals: RecordPeriodTotals;
  allTimeLabel?: string;
}

export function RecordSummarySection({
  direction,
  totals,
  allTimeLabel = "All time",
}: RecordSummarySectionProps) {
  const incoming = direction === "incoming";
  const Icon = incoming ? ArrowDownToLine : ArrowUpFromLine;

  return (
    <section className="rounded-lg border bg-card p-5 shadow-sm">
      <div className="mb-8 flex items-start justify-between">
        <span
          className={
            incoming
              ? "rounded-md bg-emerald-500/10 p-2.5 text-emerald-700"
              : "rounded-md bg-violet-500/10 p-2.5 text-violet-600"
          }>
          <Icon className="size-5" />
        </span>
        <span
          className={
            incoming
              ? "rounded-full bg-emerald-500/10 px-2 py-1 text-[10px] font-semibold uppercase text-emerald-700"
              : "rounded-full bg-violet-500/10 px-2 py-1 text-[10px] font-semibold uppercase text-violet-600"
          }>
          This month
        </span>
      </div>

      <p className="text-3xl font-semibold tracking-tight">
        {totals.thisMonth.toLocaleString()}
      </p>
      <p className="mt-1 text-[11px] font-semibold uppercase tracking-[0.14em] text-muted-foreground">
        {direction} records
      </p>

      <div className="mt-5 grid grid-cols-3 border-t pt-3 text-xs">
        <div>
          <p className="text-muted-foreground">Today</p>
          <p className="mt-1 font-semibold">{totals.today.toLocaleString()}</p>
        </div>
        <div>
          <p className="text-muted-foreground">This week</p>
          <p className="mt-1 font-semibold">
            {totals.thisWeek.toLocaleString()}
          </p>
        </div>
        <div>
          <p className="text-muted-foreground">{allTimeLabel}</p>
          <p className="mt-1 font-semibold">{totals.allTime.toLocaleString()}</p>
        </div>
      </div>
    </section>
  );
}
