import { BlurView } from "expo-blur";
import { StyleSheet, Text, View } from "react-native";

type ShowInfoProps = {
  seasons: number;
  participants: number;
  streamingService: string;
  startDate: string;
  endDate?: string | null;
};

const ShowInfo = ({
  seasons,
  participants,
  streamingService,
  startDate,
  endDate,
}: ShowInfoProps) => {
  return (
    <View style={styles.showMainInfoSection}>
      <BlurView intensity={25} tint="dark" style={styles.pill}>
        <Text style={styles.showInfoText}>{seasons} Staffeln</Text>
      </BlurView>
      <BlurView intensity={25} tint="dark" style={styles.pill}>
        <Text style={styles.showInfoText}>{participants} Teilnehmer</Text>
      </BlurView>
      <BlurView intensity={25} tint="dark" style={styles.pill}>
        <Text style={styles.showInfoText}>{streamingService}</Text>
      </BlurView>
    </View>
  );
};

const styles = StyleSheet.create({
  showMainInfoSection: {
    alignSelf: "center",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    gap: 8,
    marginTop: 8,
    marginBottom: 12,
  },
  pill: {
    paddingHorizontal: 14,
    paddingVertical: 7,
    borderRadius: 20,
    overflow: "hidden",
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: "rgba(255,255,255,0.1)",
  },
  showInfoText: {
    color: "rgba(255,255,255,0.85)",
    fontSize: 13,
    fontWeight: "500",
    letterSpacing: 0.2,
  },
});

export default ShowInfo;