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

type ParticipantDetailsProps = {
  description: string;
  concept: string;
  genres: string[];
  streamingService: string;
};

const ParticipantDetails = ({
  description,
  concept,
  genres,
  streamingService,
}: ParticipantDetailsProps) => {
  return (
    <View style={styles.participantsDetailsContainer}>
      <Text style={styles.detailTitle}>Beschreibung:</Text>
      <Text style={styles.detailLabel}>{description}</Text>
      <Text style={styles.detailTitle}>Konzept:</Text>
      <Text style={styles.detailLabel}>{concept}</Text>
      <Text style={styles.detailTitle}>Genres:</Text>
      <Text style={styles.detailLabel}>{genres.join(', ')}</Text>
      <Text style={styles.detailTitle}>Produktion:</Text>
      <Text style={styles.detailLabel}>{streamingService}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  participantsDetailsContainer: {
    width: "100%",
    height: "100%",
    backgroundColor: "hsl(221, 39%, 2%)",
  },
  detailTitle: {
    color: "hsl(0, 0%, 100%)",
    fontSize: 14,
    fontWeight: "bold",
    marginTop: 10,
    marginLeft: 20,
    marginBottom: 5,
  },
  detailLabel: {
    color: "hsl(0, 0%, 80%)",
    fontSize: 14,
    lineHeight: 20,
    width: "90%",
    fontWeight: "300",
    marginLeft: 20,
    marginTop: 5,
  },
});

export default ParticipantDetails;