import { useMemo } from 'react';
import us from 'us';
import cx from "../../../../../utils/css/cx.js";
import { IfActive } from "../../../../application/index.js";
import { useContainerResponsiveValues } from "../../../../../hooks/breakpoint/index.js";
import classes from './styles.module.scss';
const cls = cx.merge(classes);
const Cell = function Cell(props) {
  const {
    meta,
    simpler
  } = props;
  const widthMinForLabel = useContainerResponsiveValues({
    sm: Infinity,
    md: 5,
    lg: 4,
    xxl: 3
  });
  const label = useMemo(() => {
    if (simpler) return undefined;
    if (!meta.label || !(meta.width >= widthMinForLabel)) {
      return undefined;
    }
    return us.lookup(meta.label)?.abbr;
  }, [meta.label, meta.width, widthMinForLabel, simpler]);
  return <div className={cls('cell', meta.status, {
    'border-right': meta.borderRight,
    'border-top': meta.borderTop,
    'border-bottom': meta.borderBottom,
    simpler
  })}>
      <IfActive active={label}>
        <span className={cls('label-container')}>
          <span className={cls('label')} style={{
          paddingTop: meta.paddingTop,
          paddingLeft: meta.paddingLeft
        }}>
            {label}
          </span>
        </span>
      </IfActive>
    </div>;
};
export default Cell;