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

import {BadgeCardContainerProps} from './interfaces';
import {getBadgeValues, styles} from './styles';

interface Props extends BadgeCardContainerProps {
  elevationStyle: StyleProp<ViewStyle>;
}

export function BadgeCardContainer({
  text,
  variant,
  elevationStyle,
  hasIcon,
  Icon,
  iconSize,
  textStyle,
  numberOfLines,
  style,
}: Props) {
  const {theme, iconSizes} = useTheme();
  const {
    backgroundColor,
    borderColor,
    color,
    Icon: DefaultBadgeIcon,
  } = getBadgeValues(variant, theme);
  const BadgeIcon = Icon || DefaultBadgeIcon;

  return (
    <View
      style={[
        elevationStyle,
        styles.badgeStyle,
        {backgroundColor, borderColor},
        style,
      ]}>
      {hasIcon && <BadgeIcon size={iconSize ?? iconSizes.x3} stroke={color} />}
      {!!text && (
        <Typography
          variant="xxs"
          color={color}
          style={textStyle}
          numberOfLines={numberOfLines}>
          {text}
        </Typography>
      )}
    </View>
  );
}
