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

/**
 * Big checkbox or radio card (the wizard's option style): title, help
 * text, and a highlighted border when chosen.
 */
const OptionCard = ({
  type = "checkbox",
  name,
  checked,
  onChange,
  title,
  description,
  extra,
}) => (
  <label
    className={cn(
      "ino:flex ino:cursor-pointer ino:items-start ino:gap-3 ino:rounded-lg ino:border ino:border-border ino:bg-background ino:p-3.5 ino:transition-colors ino:hover:bg-muted/40",
      checked &&
        "ino:border-primary ino:bg-primary/5 ino:ring-1 ino:ring-primary",
    )}
  >
    <input
      type={type}
      name={name}
      checked={checked}
      onChange={(event) => onChange(event.target.checked)}
      className="ino:mt-0.5 ino:size-4 ino:accent-[var(--color-primary)]"
    />
    <span className="ino:flex ino:flex-col ino:gap-0.5">
      <span className="ino:flex ino:items-center ino:gap-2 ino:text-sm ino:font-semibold">
        {title}
        {extra}
      </span>
      {description && (
        <span className="ino:text-[13px] ino:text-muted-foreground">
          {description}
        </span>
      )}
    </span>
  </label>
);

export default OptionCard;