import React from "react";
import { RadioGroupItem } from "./radio-group";
import { cn } from "../../lib/utils";

export interface SelectableCardProps {
  /** The value passed to the parent RadioGroup */
  value: string;
  /** Whether this card is currently selected */
  selected?: boolean;
  /** Content rendered inside the card */
  children: React.ReactNode;
  className?: string;
}

/**
 * A card-shaped radio option. Place inside a RadioGroup.
 * Hides the RadioGroupItem visually so the entire card acts as the selector.
 */
export function SelectableCard({
  value,
  selected = false,
  children,
  className,
}: SelectableCardProps) {
  return (
    <label
      className={cn(
        "flex cursor-pointer flex-col items-center justify-center gap-3 border border-border p-6 text-center transition-colors hover:border-primary hover:bg-primary/5",
        selected && "border-primary bg-primary/5",
        className,
      )}
    >
      <RadioGroupItem value={value} className="sr-only" />
      {children}
    </label>
  );
}