import React from 'react';

import type { TagProps } from './type';
import { Pressable, Text, View } from 'react-native';
import { TagTheme } from './theme';
import { Flex } from '@ant-design/react-native';

export const Tag: React.FC<TagProps> = ({
  theme = 'primary',
  children,
  className,
  closable,
  onClose,
  testID = 'default',
  ...props
}) => {
  const Content = (
    <View
      className={className}
      style={[TagTheme.common, TagTheme[theme], closable && TagTheme.closable]}
      testID={`hcds-mobile-tag-${testID}`}
      {...props}
    >
      <Flex justify="around" align="center">
        <Text style={[TagTheme.textStyles]}>{children}</Text>
        {closable && <Text style={[TagTheme.closeIcon]}>&times;</Text>}
      </Flex>
    </View>
  );

  return closable ? (
    <Pressable onPress={onClose}>{Content}</Pressable>
  ) : (
    Content
  );
};