import { View, Text, StyleSheet } 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}>
      <Text style={styles.showInfoText}>{seasons} Staffeln</Text>
      <View style={styles.dot} />
      <Text style={styles.showInfoText}>{participants} Teilnehmer</Text>
      <View style={styles.dot} />
      <Text style={styles.showInfoText}>{streamingService}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  showMainInfoSection: {
    width: "auto",
    height: "auto",
    alignSelf: "center",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    top: 20,
    marginBottom: 20,
  },
  showInfoText: {
    color: "hsl(0, 0%, 80%)",
    fontSize: 14,
  },
  dot: {
    width: 4,
    height: 4,
    borderRadius: 3,
    backgroundColor: "hsl(0, 0%, 80%)",
    marginHorizontal: 7,
    marginTop: 2,
  },
});

export default ShowInfo;