community-rule/app/components/cards/Selection/Selection.container.tsx

"use client";

import { memo } from "react";
import { SelectionView } from "./Selection.view";
import type { SelectionProps, SelectionSizeValue } from "./Selection.types";

function resolveSelectionSize(
  size: SelectionProps["size"],
  orientation: SelectionProps["orientation"],
): SelectionSizeValue {
  if (size) return size;
  if (orientation === "vertical") return "l";
  return "m";
}

/**
 * Figma: "Card / CardSelection" — stacked tile e.g. `16775:28762` (recommended + label + supportText).
 * Size `s` is Control / Chip; `m` is the compact tile (`orientation="horizontal"`); `l` is the
 * full-width row (`orientation="vertical"`, CardStack `singleStack` / right-rail). Helper `?`
 * stays off until tooltip behavior ships.
 */
const SelectionContainer = memo<SelectionProps>(
  ({
    label,
    supportText = "",
    recommended = false,
    selected = false,
    size: sizeProp,
    orientation,
    showInfoIcon = false,
    id,
    className = "",
    onClick,
  }) => {
    const size = resolveSelectionSize(sizeProp, orientation);

    const handleClick = () => {
      if (onClick) onClick();
    };

    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
      if (event.key === "Enter" || event.key === " ") {
        event.preventDefault();
        handleClick();
      }
    };

    return (
      <SelectionView
        label={label}
        supportText={supportText}
        recommended={recommended}
        selected={selected}
        size={size}
        showInfoIcon={showInfoIcon}
        id={id}
        className={className}
        onClick={handleClick}
        onKeyDown={handleKeyDown}
      />
    );
  },
);

SelectionContainer.displayName = "Selection";

export default SelectionContainer;