import React from 'react';
import {View} from 'react-native';
import {Typography, TypographyVariant} from '@components/_core/Typography';
import {useTheme} from '@shared/theme';

import {PillProps} from './interfaces';
import {styles, getVariantValues} from './styles';

export function Pill({
  text,
  children,
  appearance = 'auto',
  size = 'sm',
  withIcon = false,
  variant = 'primary',
  style,
}: PillProps) {
  const {iconSizes, theme} = useTheme();
  const {backgroundColor, borderColor, color, Icon} = getVariantValues({
    variant,
    appearance,
    theme,
  });
  const textVariant: TypographyVariant = size === 'sm' ? 'xxs' : 'xs';

  return (
    <View style={[styles.container, style]}>
      <View
        style={[styles.content, styles[size], {backgroundColor, borderColor}]}>
        {!!withIcon && !!Icon && <Icon size={iconSizes.x4} color={color} />}
        {!!text && (
          <Typography variant={textVariant} weight="semiBold" color={color}>
            {text}
          </Typography>
        )}
        {children}
      </View>
    </View>
  );
}

export * from './interfaces';