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

/** Preview of the checkbox style: a box that ticks, then the label. */
const CheckboxPreview = ({ added, label, color, onToggle }) => (
  <button
    type="button"
    role="checkbox"
    aria-checked={added}
    onClick={onToggle}
    className="ino:inline-flex ino:cursor-pointer ino:items-center ino:gap-2 ino:self-start ino:border-0 ino:bg-transparent ino:p-0 ino:text-[13px]"
  >
    <span
      aria-hidden="true"
      className={cn(
        "ino:flex ino:size-[18px] ino:items-center ino:justify-center ino:rounded ino:border-[1.5px] ino:border-input ino:bg-background",
        added && "ino:text-white",
      )}
      style={added ? { background: color, borderColor: color } : undefined}
    >
      {added && <CompareIcon name="check" size={12} />}
    </span>
    {label}
  </button>
);

export default CheckboxPreview;