wanderer/assets/js/hooks/Mapper/components/ui-kit/WdResponsiveCheckBox/WdResponsiveCheckbox.tsx

import React from 'react';
import clsx from 'clsx';
import { WdCheckbox, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit';

/**
 * Display modes for the responsive checkbox.
 *
 * - "full": show the full label (e.g. "Show offline" or "Show ship name")
 * - "abbr": show the abbreviated label (e.g. "Offline" or "Ship name")
 * - "checkbox": show only the checkbox (no text)
 * - "hide": do not render the checkbox at all
 */
export type WdDisplayMode = 'full' | 'abbr' | 'checkbox' | 'hide';

export interface WdResponsiveCheckboxProps {
  tooltipContent: string;
  size: 'xs' | 'normal' | 'm';
  labelFull: string;
  labelAbbreviated: string;
  value: boolean;
  onChange: () => void;
  classNameLabel?: string;
  containerClassName?: string;
  labelSide?: 'left' | 'right';
  displayMode: WdDisplayMode;
}

export const WdResponsiveCheckbox: React.FC<WdResponsiveCheckboxProps> = ({
  tooltipContent,
  size,
  labelFull,
  labelAbbreviated,
  value,
  onChange,
  classNameLabel,
  containerClassName,
  labelSide = 'left',
  displayMode,
}) => {
  if (displayMode === 'hide') {
    return null;
  }

  const label =
    displayMode === 'full'
      ? labelFull
      : displayMode === 'abbr'
        ? labelAbbreviated
        : displayMode === 'checkbox'
          ? ''
          : labelFull;

  const checkbox = (
    <div className={clsx('min-w-0', containerClassName)}>
      <WdCheckbox
        size={size}
        labelSide={labelSide}
        label={label}
        value={value}
        classNameLabel={classNameLabel}
        onChange={onChange}
      />
    </div>
  );

  return tooltipContent ? <WdTooltipWrapper content={tooltipContent}>{checkbox}</WdTooltipWrapper> : checkbox;
};