import { Dimensions, StyleSheet } from "react-native";

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    backgroundColor: "hsl(221, 39%, 12%)",
  },
  closeIcon: {
    position: "absolute",
    top: Dimensions.get("window").height * 0.065,
    right: 15,
  },
  participantName: {
    color: "white",
    fontSize: 20,
    fontWeight: "600",
    textAlign: "center",
    marginTop: Dimensions.get("window").height * 0.06,
  },
  participantImage: {
    width: "100%",
    height: 300,
    borderRadius: 0,
    alignSelf: "center",
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
  },
  participantInfoSection: {
    width: "100%",
    height: "auto",
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 15,
    marginTop: 5,
  },
  participantInfo: {
    color: "hsl(0, 0%, 80%)",
    fontSize: 16,
    textAlign: "center",
  },
  dot: {
    width: 4,
    height: 4,
    borderRadius: 3,
    backgroundColor: "hsl(0, 0%, 80%)",
    marginHorizontal: 7,
    marginTop: 2,
  },
  performedShowsSection: {
    width: "100%",
    height: "100%",
    backgroundColor: "hsl(221, 39%, 0%)",
    marginTop: 20,
  },
  performedShowsTitle: {
    fontSize: 16,
    fontWeight: "600",
    color: "hsl(0, 0%, 80%)",
    marginTop: 15,
    marginLeft: 15,
  },

  showImage: {
    width: "100%",
    height: "100%",
    borderRadius: 10,
  },
  showLabel: {
    color: "white",
    fontSize: 14,
    fontWeight: "600",
    textAlign: "center",
  },
  contentContainer: {
    flex: 1,
    padding: 10,
    alignItems: "center",
  },
  itemContainer: {
    padding: 6,
    margin: 6,
    backgroundColor: "#eee",
  },
  showTitle: {
    color: "white",
    fontSize: 12,
    fontWeight: "600",
    textAlign: "center",
    marginTop: 15,
  },
  showSeason: {
    color: "hsl(0, 0%, 80%)",
    fontSize: 12,
    fontWeight: "400",
    textAlign: "center",
    marginTop: 5,
  },
  showContainer: {
    width: Dimensions.get("window").width - 75,
    height: 200,
    borderRadius: 15,
    marginTop: 20,
    alignItems: "center",
    backgroundColor: "hsl(336, 79%, 63%)",
  },

  card: {
    width: Dimensions.get("window").width - 75,
    alignItems: "center",
  },

  horizontalLine: {
    height: 50,
    width: 2,
    backgroundColor: "hsl(0, 0%, 70%)",
    marginTop: 10,
    alignSelf: "center",
  },
  partnerLabel: {
    color: "hsl(0, 0%, 80%)",
    fontSize: 12,
    fontWeight: "400",
    textAlign: "center",
    marginTop: 10,
  },
  participantContainer: {
    width: "auto",
    height: "auto",
    borderRadius: 15,
    marginTop: 15,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "hsl(221, 39%, 12%)",
    padding: 10,
  },

  participantLabel: {
    color: "white",
    fontSize: 12,
  },
  participantRow: {
    flexDirection: "row",
    flexWrap: "wrap",
    gap: 6,

    alignItems: "center",
    justifyContent: "flex-start",
  },

  participantChip: {
    paddingVertical: 4,
    paddingHorizontal: 8,
    borderRadius: 12,
    backgroundColor: "hsl(221, 39%, 18%)",
    maxWidth: 160,
  },
  participantChipText: {
    color: "hsl(0, 0%, 85%)",
    fontSize: 11,
  },

  moreChip: {
    paddingVertical: 4,
    paddingHorizontal: 10,
    borderRadius: 12,
    backgroundColor: "hsl(221, 39%, 28%)",
  },
  moreChipText: {
    color: "white",
    fontSize: 11,
    fontWeight: "600",
  },
  searchButton: {
    width: 50,
    height: 50,
    borderRadius: 20,
    backgroundColor: "hsl(221, 39%, 18%)",
    marginLeft: 15,
    marginTop: 15,
    marginBottom: 5,
    justifyContent: "center",
    alignItems: "center",
  },
});

export default styles;