import { JSX } from 'react';

import type { TextProps } from '../Text';

import Text from '../Text';

interface TagProps extends Omit<TextProps, 'children'> {
  text: string | string[] | JSX.Element | JSX.Element[];
  rounded?: boolean;
  highlighted?: boolean;
}

const Tag = ({
  text,
  size = '0.65em',
  rounded,
  highlighted,
  ...textProps
}: TagProps) => {
  const items = [].concat(text as any);

  return (
    <Text
      {...textProps}
      flexBox
      style={{
        borderRadius: rounded ? '100px' : '0.4em',
        backgroundColor: highlighted ? '#444' : '#111',
        border: 'solid 1px #555',
        verticalAlign: 'middle',
      }}
      color={highlighted ? '#fff' : '#ccc'}
      size={size}
      letterSpacing={0.08}
      lineHeight="1.7em"
      isInline
      noFlexShrink
    >
      {items.map((text, index) => {
        return (
          <div
            key={text}
            style={{
              borderLeft: index && 'solid 1px #555',
              padding: '0 .4em 0 .45em',
            }}
          >
            {text}
          </div>
        );
      })}
    </Text>
  );
};

export default Tag;