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

type ShowCardProps = {
  imageUri: string;
  streamingServiceUri: string;
  liveBadgeText?: string;
  liveBadgeContainerStyle?: object;
  genres: string[];
  onPress?: () => void;
};

const ShowCard = ({
  imageUri,
  streamingServiceUri,
  liveBadgeText,
  liveBadgeContainerStyle,
  genres,
  onPress,
}: ShowCardProps) => {
  return (
    <TouchableOpacity
      style={styles.showContainer}
      activeOpacity={0.3}
      onPress={onPress}
    >
      <Image
        source={{
          uri: imageUri,
        }}
        style={[StyleSheet.absoluteFillObject, { borderRadius: 35 }]}
      />
      <View style={styles.streamingServiceIcon}>
        <Image
          source={{
            uri: "https://play-lh.googleusercontent.com/e8u4F0ED6hDMzmjg5cV_C5Sxrzr3xECniwKCD2Q8QfUeVMVRLG41TrsnqroTE7uxk4E",
          }}
          style={[StyleSheet.absoluteFillObject, { borderRadius: 15 }]}
        />
      </View>
      {liveBadgeText && (
        <View style={liveBadgeContainerStyle}>
          <Text style={styles.liveBadgeText}>{liveBadgeText}</Text>
        </View>
      )}
      <View style={styles.genreSection}>
        {genres.map((genre) => (
          <Text key={genre} style={styles.genreLabel}>
            {genre}
          </Text>
        ))}
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  showContainer: {
    width: "90%",
    height: 200,
    backgroundColor: "transparent",
    alignSelf: "center",
    borderRadius: 35,
    marginTop: 20,
    borderWidth: 1.5,
    borderColor: "hsl(221, 39%, 15%)",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.18,
    shadowRadius: 1.0,
    elevation: 1,
  },
  streamingServiceIcon: {
    width: 45,
    height: 45,
    marginLeft: "auto",
    marginRight: 15,
    borderWidth: 1,
    borderColor: "white",
    borderRadius: 15,
    marginTop: 15,
  },
  liveBadgeContainer: {
    position: "absolute",
    top: 15,
    left: 20,
    backgroundColor: "red",
    borderRadius: 10,
    paddingVertical: 5,
    paddingHorizontal: 10,
  },
  liveBadgeText: {
    color: "white",
    fontWeight: "bold",
  },
  genreSection: {
    position: "absolute",
    bottom: 12,
    left: 20,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-evenly",
    gap: 5,
  },
  genreLabel: {
    color: "red",
    fontWeight: "bold",
    fontSize: 10,
    paddingVertical: 5,
    paddingHorizontal: 10,
    borderRadius: 10,
    fontStyle: "italic",
    backgroundColor: "rgba(255, 255, 255, 1)",
    overflow: "hidden",
  },
});

export default ShowCard;