import React, { FunctionComponent } from 'react';
import cn from 'classnames';

import { CardParameterType } from '../types.d';
import { Paragraph } from '../../Paragraph';
import { StyledDivCounter, StyledSecondaryIcon } from '../../StyledComponents';
import { useTheme } from '../../Theme';

export const CardParameter: FunctionComponent<CardParameterType> = ({
  className = '',
  count,
  icon,
  style,
  // text,
  textSize = 'medium',
  children,
}) => {
  const theme = useTheme();
  const classNames = cn({
    'card-text-parameter': true,
    [className]: true,
  });

  const isStringChildren = typeof children === 'string';
  return (
    <div className={classNames} style={style}>
      {/* <div className="square-card-icon-and-text-container"> */}
      {icon ? (
        <div className="square-card-parameter-icon-container">
          <StyledSecondaryIcon className="card-text-parameter-icon" $theme={theme}>
            {icon}
          </StyledSecondaryIcon>
        </div>
      ) : null}
      {isStringChildren ? (
        <Paragraph size={textSize} className="card-parameter-children card-text-parameter-text">
          {children}
        </Paragraph>
      ) : (
        <div className="card-parameter-children">{children}</div>
      )}
      {/* </div> */}
      {count !== undefined ? (
        <StyledDivCounter className="card-text-parameter-counter" $theme={theme}>
          {count}
        </StyledDivCounter>
      ) : null}
    </div>
  );
};
