import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useContext } from 'react';
import cls from 'clsx';
import ConfigProviderContext from '../../config-provider/ConfigProviderContext';
import { BORDER_BOTTOM } from '../../utils/constant';

const SkuRow = props => {
  const {
    prefixCls,
    createNamespace
  } = useContext(ConfigProviderContext);
  const [bem] = createNamespace('sku-row', prefixCls);
  const {
    skuRow
  } = props;

  const renderTitle = () => {
    return _jsxs("div", Object.assign({
      className: cls(bem('title'))
    }, {
      children: [skuRow.k, skuRow.is_multiple && _jsx("span", Object.assign({
        className: cls(bem('title-multiple'))
      }, {
        children: "\uFF08\u53EF\u591A\u9009\uFF09"
      }))]
    }));
  };

  const renderContent = () => {
    const {
      largeImageMode
    } = skuRow;
    return largeImageMode ? _jsx("div", Object.assign({
      className: cls(bem('scroller'))
    }, {
      children: _jsx("div", Object.assign({
        className: cls(bem('row'))
      }, {
        children: props.children
      }))
    })) : props.children;
  };

  return _jsxs("div", Object.assign({
    className: cls(bem(), BORDER_BOTTOM)
  }, {
    children: [renderTitle(), renderContent()]
  }));
};

export default SkuRow;