import { BlurView } from "expo-blur";
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.container}>
      <BlurView intensity={20} tint="dark" style={styles.card}>
        <Text style={styles.detailTitle}>Beschreibung</Text>
        <Text style={styles.detailLabel}>{description}</Text>
      </BlurView>
      <BlurView intensity={20} tint="dark" style={styles.card}>
        <Text style={styles.detailTitle}>Konzept</Text>
        <Text style={styles.detailLabel}>{concept}</Text>
      </BlurView>
      <BlurView intensity={20} tint="dark" style={styles.card}>
        <Text style={styles.detailTitle}>Genres</Text>
        <View style={styles.genreRow}>
          {genres.map((g) => (
            <View key={g} style={styles.genrePill}>
              <Text style={styles.genrePillText}>{g}</Text>
            </View>
          ))}
        </View>
      </BlurView>
      <BlurView intensity={20} tint="dark" style={styles.card}>
        <Text style={styles.detailTitle}>Produktion</Text>
        <Text style={styles.detailLabel}>{streamingService}</Text>
      </BlurView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    width: "100%",
    paddingHorizontal: 16,
    paddingTop: 12,
    paddingBottom: 20,
    gap: 12,
    backgroundColor: "transparent",
  },
  card: {
    borderRadius: 20,
    overflow: "hidden",
    padding: 18,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: "rgba(255,255,255,0.08)",
  },
  detailTitle: {
    color: "rgba(255,255,255,0.95)",
    fontSize: 15,
    fontWeight: "700",
    marginBottom: 8,
    letterSpacing: 0.2,
  },
  detailLabel: {
    color: "rgba(255,255,255,0.65)",
    fontSize: 14,
    lineHeight: 22,
    fontWeight: "400",
  },
  genreRow: {
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 8,
  },
  genrePill: {
    backgroundColor: "rgba(255,255,255,0.1)",
    paddingHorizontal: 14,
    paddingVertical: 6,
    borderRadius: 16,
  },
  genrePillText: {
    color: "rgba(255,255,255,0.8)",
    fontSize: 13,
    fontWeight: "500",
  },
});

export default ParticipantDetails;