interface SelectionCheckboxProps {
  selected: boolean;
  className?: string;
}

/**
 * Shared circular multi-select indicator -- every list in this app that lets you pick multiple
 * items (forward targets, message multi-select, create-group contact picker, favorites, blocklist)
 * used to hand-copy this same circle-that-fills-with-a-checkmark markup into its own file, each
 * with small, accidental class differences (a stray extra border in the selected state here, a
 * slightly different gray there) -- fixing the same visual bug five separate times is exactly the
 * failure mode a shared component exists to prevent.
 *
 * Draws the checkmark as a hand-drawn SVG path, not the Material Icons font glyph `Icon` uses
 * everywhere else: the font's hinting isn't tuned for a ~13px glyph inside a 20px circle, so above
 * 1x pixel density it renders visibly soft/asymmetric where a vector path stays crisp at any scale.
 * A deliberate one-off exception to this app's usual `Icon`-for-everything convention, not a second
 * icon system -- scoped to this one selection indicator.
 */
export function SelectionCheckbox({ selected, className = '' }: SelectionCheckboxProps) {
  return (
    <span
      className={`grid h-5 w-5 flex-none place-items-center rounded-full ${selected ? 'bg-accent' : 'border-[1.5px] border-[#c5cad2] bg-white'} ${className}`}
    >
      {selected ? (
        <svg viewBox="0 0 16 16" fill="none" className="h-3 w-3 text-white" aria-hidden="true">
          <path d="M3.5 8.5L6.5 11.5L12.5 4.5" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      ) : null}
    </span>
  );
}