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

/**
 * Section header block used above each chart on the Money (Transactions) page.
 *
 * Two layout variants:
 *
 * `layout="vertical"` (default)
 * ┌─────────────────────────────────────────┐
 * │  $37,085            [optional action]    │
 * │  Cash Balance                            │
 * │  30 Days Total                           │
 * │  (Based on connected bank transactions)  │
 * └─────────────────────────────────────────┘
 *
 * `layout="horizontal"`
 * ┌─────────────────────────────────────────┐
 * │  CASH BALANCE               $37,085     │
 * │  (Based on connected bank transactions) │
 * └─────────────────────────────────────────┘
 */

export interface TransactionsSummaryBlockProps {
  /** Pre-formatted total value — e.g. "$37,085" — displayed prominently */
  value: string;
  /** Section label — e.g. "Cash Balance", "Income", "Expense" */
  label: string;
  /** Period text — e.g. "30 Days Total" (vertical layout only) */
  period?: string;
  /** Small footnote — e.g. "(Based on connected bank transactions)" */
  footnote?: string;
  /** Optional trailing element — e.g. a Button for "Set Goal" (vertical layout only) */
  action?: React.ReactNode;
  /**
   * Layout variant.
   * - `"vertical"` (default): value large on top, label + period below
   * - `"horizontal"`: label small-caps left, value large right — mirrors Borrowing Capacity style
   */
  layout?: "vertical" | "horizontal";
  className?: string;
}

export function TransactionsSummaryBlock({
  value,
  label,
  period,
  footnote,
  action,
  layout = "vertical",
  className,
}: TransactionsSummaryBlockProps) {
  if (layout === "horizontal") {
    return (
      <div className={cn("flex flex-col gap-0.5 py-3", className)}>
        <div className="flex items-baseline justify-between gap-4">
          <p className="text-xs font-semibold uppercase tracking-widest text-muted-foreground">
            {label}
          </p>
          <div className="flex shrink-0 items-baseline gap-3">
            <p className="text-lg font-bold tabular-nums text-foreground">
              {value}
            </p>
            {action && <div className="shrink-0">{action}</div>}
          </div>
        </div>
        {footnote && (
          <p className="text-sm text-muted-foreground">{footnote}</p>
        )}
      </div>
    );
  }

  return (
    <div
      className={cn("flex items-start justify-between gap-2 py-3", className)}
    >
      <div className="flex flex-col gap-0.5">
        <p className="text-2xl font-bold tabular-nums text-foreground">
          {value}
        </p>
        <p className="text-sm font-medium text-foreground">{label}</p>
        {period && <p className="text-xs text-muted-foreground">{period}</p>}
        {footnote && (
          <p className="text-xs text-muted-foreground">{footnote}</p>
        )}
      </div>

      {action && <div className="shrink-0">{action}</div>}
    </div>
  );
}