import { Dimensions, StyleSheet } from "react-native";
const screenWidth = Dimensions.get("window").width;
export const styles = StyleSheet.create({
  loadingMainView: {
    justifyContent: "center",
    alignItems: "center",
    marginTop: 20,
  },
  mainModalContainer: {
    flex: 1,
    borderRadius: 12,
    marginHorizontal: 10,
    justifyContent: "center",
  },
  mainViewStyle: {
    borderRadius: 12,
    height: "auto",
    position: "relative",
    backgroundColor: "#FFF",
  },
  headerTextStyle: {
    fontSize: 24,
    fontWeight: "600",
    lineHeight: 36,
    color: "#FFF",
    textAlign: "center",
    paddingVertical: 40,
  },
  TopThreeContainer: {
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "flex-end",
    gap: 8,
  },
  RunnerUpViewStyle: {
    borderRadius: 10,
    backgroundColor: "rgba(255, 255, 255, 0.20)",
    paddingHorizontal: 10,
    alignItems: "center",
  },
  RunnerUpImageView: {
    width: 48,
    height: 48,
    borderRadius: 48,
    position: "absolute",
    top: -26,
  },
  RunnerUpTitleStyle: {
    fontSize: 16,
    fontWeight: "600",
    lineHeight: 24,
    color: "#FFF",

    textAlign: "center",
  },
  RunnerUpPointsStyle: {
    backgroundColor: "#FFF",
    padding: 8,
    borderRadius: 8,
    marginTop: 8,
    width: 75,
  },
  RunnerUpPointsTextStyle: {
    color: "#9035FF",
    fontSize: 12,
    textAlign: "center",
    fontWeight: "500",
    lineHeight: 16,
  },
  TopFirstImageView: {
    width: 80,
    height: 80,
    borderRadius: 88,
    position: "absolute",
    top: -42,
  },

  questionBackgroundViewStyle: {
    width: "90%",
    backgroundColor: "#FFF",
    borderTopLeftRadius: 12,
    borderTopRightRadius: 12,
    paddingHorizontal: 20,
    paddingTop: 20,
    marginTop: -20,
    maxHeight: 220,
    shadowColor: "#575757", // Shadow color
    shadowOffset: { width: 0, height: 4 }, // Offset matches the 0px 4px in CSS
    shadowOpacity: 0.08, // Opacity matches the rgba(87, 87, 87, 0.08)
    shadowRadius: 10, // Adjusted to approximate the blur radius (20px in CSS)
    // Android Shadow
    // elevation: 0.5,
  },
  questionHeaderTextStyle: {
    fontSize: 18,
    fontWeight: "600",
    lineHeight: 28,
    color: "#0D0D0D",
  },
  questionDescriptionTextStyle: {
    fontSize: 12,
    fontWeight: "400",
    lineHeight: 16,
    marginTop: 4,
    color: "#B9B9B9",
    marginBottom: 12,
  },
  footerView: {
    display: "flex",
    paddingVertical: 12,
    paddingHorizontal: 20,
    justifyContent: "center",
    gap: 8,
    alignSelf: "stretch",
    backgroundColor: "#FBFBFB",
    borderBottomStartRadius: 12,
    borderBottomEndRadius: 12,
  },
  footerInnerView: {
    display: "flex",
    justifyContent: "space-between",
    flexDirection: "row",
    alignItems: "center",
  },
  footerText: {
    fontSize: 12,
    fontStyle: "normal",
    fontWeight: "400",
    lineHeight: 16,
    color: "#B9B9B9",
  },
  indexViewStyle: {
    backgroundColor: "#F4EBFF",
    padding: 4,
    borderRadius: 40,
    width: 24,
    height: 24,
    justifyContent: "center",
    alignItems: "center",
    marginRight: 12,
  },
  indexTextStyle: {
    color: "#9035FF",
    fontSize: 10,
    fontWeight: "600",
    lineHeight: 12,
  },
  restImageStyle: {
    width: 48,
    height: 48,
    borderRadius: 48,
    marginRight: 12,
  },
  listTitleText: {
    fontSize: 16,
    fontWeight: "600",
    lineHeight: 24,
  },
  listPointsText: {
    fontSize: 12,
    fontWeight: "500",
    lineHeight: 16,
    color: "#9035FF",
  },
  progressBar: {
    width: "100%",
    height: 6,
    backgroundColor: "#EFEFEF",
    borderRadius: 8,
    overflow: "hidden",
    marginVertical: 8,
  },
  progressBarInnerStyle: {
    backgroundColor: "#9035FF",
    height: "100%",
    borderRadius: 8,
  },
  trofiViewStyle: {
    backgroundColor: "#F4EBFF",
    padding: 4,
    borderRadius: 48,
    alignItems: "flex-start",
  },
});