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

// ─── Types ────────────────────────────────────────────────────────────────────

export type LoanOptionCardProps = {
  /** Card label displayed at the top */
  title: string;
  /** Icon rendered below the title — pass any ReactNode (SVG, img, lucide icon) */
  icon: React.ReactNode;
  /** Whether this card is currently selected */
  selected?: boolean;
  /** Click / select handler */
  onClick?: () => void;
  /** Disable interaction */
  disabled?: boolean;
  className?: string;
};

// ─── Component ────────────────────────────────────────────────────────────────

/**
 * Selectable option card used in loan application entry screens.
 *
 * Figma: WealthX-Backoffice---Mobile-App
 *   Entry screen  → node 19308:56690
 *   App-type screen → node 19308:56893
 */
export function LoanOptionCard({
  title,
  icon,
  selected = false,
  onClick,
  disabled = false,
  className,
}: LoanOptionCardProps) {
  return (
    <button
      type="button"
      onClick={onClick}
      disabled={disabled}
      aria-pressed={selected}
      className={cn(
        // Base — fixed height so all cards in a row are equal regardless of title length
        "flex h-[200px] w-[300px] flex-col items-center justify-between border-2 p-8 font-sans",
        "outline-none transition-colors focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
        // States
        selected
          ? "border-primary bg-primary/5"
          : "border-border hover:bg-accent",
        disabled && "pointer-events-none opacity-40",
        className,
      )}
    >
      <span className="text-center text-lg font-bold leading-normal text-foreground">
        {title}
      </span>
      {/* Icon container — 56 × 56px */}
      <div className="flex size-14 items-center justify-center">{icon}</div>
    </button>
  );
}