import React from "react";
import { RadioGroup } from "./radio-group";
import { SelectableCard } from "./selectable-card";
import { cn } from "@/lib/utils";

/**
 * A single choice within a {@link SelectionCards} grid — an icon over a title.
 * Used for binary or small-set decisions (e.g. "New User" vs "Existing User",
 * "Individual" vs "Joint Application").
 */
export interface SelectionCardOption {
  /** Stable key — becomes the RadioGroup value passed to onSelect. */
  key: string;
  /** Card title. */
  title: string;
  /** Icon rendered above the title — typically a lucide icon at a large size. */
  icon: React.ReactNode;
}

export interface SelectionCardsProps {
  /** Heading shown above the option grid. */
  title: string;
  options: SelectionCardOption[];
  onSelect: (key: string) => void;
  /** Grid columns at the `md:` breakpoint and above. Defaults to 2. */
  columns?: 2 | 3;
  className?: string;
}

/**
 * Composes {@link SelectableCard} + {@link RadioGroup} into the icon+title
 * choice grid used for the loan application entry decisions (getting-started,
 * select-application-type).
 */
export function SelectionCards({
  title,
  options,
  onSelect,
  columns = 2,
  className,
}: SelectionCardsProps) {
  return (
    <div
      className={cn(
        "flex w-full flex-col items-center gap-6 text-center",
        className,
      )}
    >
      <h2 className="text-h5 text-foreground">{title}</h2>
      <RadioGroup
        onValueChange={onSelect}
        className={cn(
          "w-full justify-center gap-6",
          columns === 3 ? "md:grid-cols-3" : "md:grid-cols-2",
        )}
      >
        {options.map((option) => (
          <SelectableCard
            key={option.key}
            value={option.key}
            className="mx-auto h-full w-[300px] max-w-full gap-6 p-8"
          >
            <span className="text-h5 text-foreground">{option.title}</span>
            <span className="flex h-20 w-20 items-center justify-center text-foreground [&_svg]:h-20 [&_svg]:w-20">
              {option.icon}
            </span>
          </SelectableCard>
        ))}
      </RadioGroup>
    </div>
  );
}