import { Text, StyleSheet, View } from 'react-native';
import { badgeTexts, innerBorders, metadatas } from './styles';
import { variants } from '../common/styles';
import type { IBadgeProps } from './types';

export default function Badge(props: IBadgeProps) {
  const {
    children,
    metadata,
    style,
    innerBordersStyle,
    textStyle,
    variant = 'primary',
  } = props;
  return (
    <View
      style={StyleSheet.flatten([variants.basic, variants[variant], style])}
    >
      {typeof metadata !== 'undefined' ? (
        <View
          style={StyleSheet.flatten([
            metadatas.container,
            variants[variant],
            innerBorders[variant],
          ])}
        >
          <Text
            style={StyleSheet.flatten([metadatas.basic, badgeTexts[variant]])}
          >
            {metadata}
          </Text>
        </View>
      ) : null}
      <View
        style={StyleSheet.flatten([
          innerBorders.basic,
          innerBorders[variant],
          innerBordersStyle,
        ])}
      >
        {typeof children === 'string' ||
        typeof (children as string[])?.[0] === 'string' ? (
          <Text
            style={StyleSheet.flatten([
              badgeTexts.basic,
              badgeTexts[variant],
              textStyle,
            ])}
          >
            {children}
          </Text>
        ) : (
          children
        )}
      </View>
    </View>
  );
}