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.077,
    right: 30,
  },
  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: {
    marginTop: 0,
    width: "100%",
    height: "100%",
    paddingHorizontal: 20,
    paddingVertical: 10,
    backgroundColor: "hsl(221, 39%, 0%)",
  },
  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,
  },
});

export default styles;