streamyfin/components/Badge.tsx

import { Platform, StyleSheet, View, type ViewProps } from "react-native";
import { GlassEffectView } from "react-native-glass-effect-view";
import { Text } from "./common/Text";

interface Props extends ViewProps {
  text?: string | number | null;
  variant?: "gray" | "purple";
  iconLeft?: React.ReactNode;
}

export const Badge: React.FC<Props> = ({
  iconLeft,
  text,
  variant = "purple",
  ...props
}) => {
  const content = (
    <View style={styles.content}>
      {iconLeft && <View style={styles.iconLeft}>{iconLeft}</View>}
      <Text
        className={`
          text-xs
          ${variant === "purple" && "text-white"}
      `}
      >
        {text}
      </Text>
    </View>
  );

  if (Platform.OS === "ios" && !Platform.isTV) {
    return (
      <View {...props} style={[styles.container, props.style]}>
        <GlassEffectView style={{ borderRadius: 100 }}>
          {content}
        </GlassEffectView>
      </View>
    );
  }

  // On TV, use transparent backgrounds for a cleaner look
  const isTV = Platform.isTV;

  return (
    <View
      {...props}
      style={[
        {
          borderRadius: 4,
          padding: 4,
          paddingHorizontal: 6,
          flexShrink: 1,
          flexGrow: 0,
          alignSelf: "flex-start",
          flexDirection: "row",
          alignItems: "center",
          backgroundColor: isTV
            ? "rgba(255,255,255,0.1)"
            : variant === "purple"
              ? "#9333ea"
              : "#262626",
        },
        props.style,
      ]}
    >
      {iconLeft && <View style={{ marginRight: 4 }}>{iconLeft}</View>}
      <Text
        style={{
          fontSize: 12,
          color: "#fff",
        }}
      >
        {text}
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    overflow: "hidden",
    alignSelf: "flex-start",
    flexShrink: 1,
    flexGrow: 0,
  },
  content: {
    flexDirection: "row",
    alignItems: "center",
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderRadius: 50,
    backgroundColor: "transparent",
  },
  iconLeft: {
    marginRight: 4,
  },
});