import ShowCard from "@/components/ui/ShowCard";
import { StyleSheet, Dimensions } from "react-native";

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    backgroundColor: "hsl(221, 39%, 12%)",
  },
  closeIcon: {
    position: "absolute",
    top: Dimensions.get("window").height * 0.07,
    right: 15,
  },
  participantName: {
    color: "white",
    fontSize: 24,
    fontWeight: "600",
    textAlign: "center",
    marginTop: Dimensions.get("window").height * 0.075,
  },
  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: 500,
    paddingLeft: 15,
    paddingBottom: 20,
    backgroundColor: "hsl(221, 39%, 0%)",
    marginTop: 15,
  },
  performedShowsTitle: {
    fontSize: 16,
    fontWeight: "600",
    color: "hsl(0, 0%, 80%)",
    marginTop: 15,
  },
  showContainer: {
    width: 120,
    height: 180,
    backgroundColor: "hsl(336, 79%, 63%)",
    borderRadius: 10,
    marginRight: 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: 10,
  },
  showSeason: {
    color: "hsl(0, 0%, 80%)",
    fontSize: 12,
    fontWeight: "400",
    textAlign: "center",
    marginTop: 3,
  },
});

export default styles;