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

export const styles = StyleSheet.create({
  loadingMainView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  mainView: {
    width: "100%",
    borderRadius: 12,
    minHeight: "45%",
    maxHeight: "90%",
    backgroundColor: "#FFF",
  },
  headerView: {
    padding: 20,
    borderBottomWidth: 1,
    borderColor: "#EFEFEF",
  },
  getStartedView: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "flex-start",
  },
  progressBarTextStyle: {
    color: "#9035FF",
    fontSize: 10,
    fontWeight: "700",
    lineHeight: 12,
    letterSpacing: -0.1,
  },
  progressBar: {
    width: "100%",
    height: 6,
    borderRadius: 8,
    overflow: "hidden",
    marginTop: 8,
  },
  progressBarInnerStyle: {
    height: "100%",
    borderRadius: 8,
  },
  stepTextView: {
    fontSize: 14,
    color: "#939393",
    fontWeight: "400",
    lineHeight: 20,
  },
  headerText: {
    fontSize: 20,
    fontWeight: "600",
    lineHeight: 30,
  },
  descriptionText: {
    color: "#939393",
    fontSize: 12,
    fontWeight: "400",
    lineHeight: 16,
  },
  detailsText: {
    fontSize: 14,
    fontWeight: "400",
    color: "#AFAFAF",
  },
  completedView: {
    width: 104,

    display: "flex",
    flexDirection: "row",

    justifyContent: "center",
    gap: 4,
    paddingVertical: 6,
    paddingHorizontal: 12,

    alignItems: "center",
    backgroundColor: "#EBFFEB",
    borderRadius: 6,
  },
  CompletedTextView: {
    fontSize: 12,
    fontWeight: "400",
    color: "#008000",
    lineHeight: 16,
    fontStyle: "normal",
  },

  mainInnerCardView: {
    display: "flex",
    padding: 20,
    width: "100%",
    paddingBottom: 10,
  },
  cardView: {
    borderColor: "#EFEFEF",
    padding: 12,
    gap: 12,
    alignSelf: "stretch",
    marginBottom: 12,
  },
  imageView: {
    marginRight: 12,
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    padding: 8,
    borderRadius: 48,
    backgroundColor: "#F4EBFF",
  },
  image: {
    width: 16,
    height: 16,
  },
  cardHeaderText: {
    fontSize: 14,
    fontWeight: "500",
    lineHeight: 20,
    fontStyle: "normal",
  },
  cardDesciptionText: {
    fontSize: 12,
    fontWeight: "400",
    color: "#939393",
    lineHeight: 16,

    marginTop: 4,
  },
  LastView: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    gap: 12,
  },
  startNowButtonView: {
    paddingHorizontal: 16,
    paddingVertical: 12,
    borderRadius: 10,
    alignItems: "center",
    justifyContent: "center",
  },
  visitWebButtonView: {
    paddingHorizontal: 16,
    paddingVertical: 10,
    borderRadius: 10,
    alignItems: "center",
    justifyContent: "center",
    borderWidth: 1.5,
    borderColor: "#EFEFEF",
  },
  startNowButton: {
    color: "white",
    fontSize: 14,
    lineHeight: 16,
    fontWeight: "600",
  },

  visitWebButton: {
    color: "#2C2C2C",
    fontSize: 14,
    lineHeight: 20,
    fontWeight: "500",
  },
  demoView: {
    display: "flex",
    paddingHorizontal: 6,
    paddingVertical: 4,
    justifyContent: "center",
    alignItems: "center",
    gap: 4,
  },
  demoText: {
    color: "black",
    fontSize: 12,
    fontWeight: "500",
    fontStyle: "normal",
  },
  ArrowButtonView: { alignItems: "center", flexDirection: "row", gap: 8 },
  buttonView: {
    flex: 1,
    alignItems: "center",
    flexDirection: "column",
    justifyContent: "center",
    gap: 5,
  },

  poweredView: {
    paddingVertical: 10,
    borderBottomEndRadius: 10,
    borderBottomStartRadius: 10,
    backgroundColor: "#FBFBFB",
  },

  poweredText: {
    textAlign: "center",
    fontSize: 12,
    fontStyle: "normal",
    fontWeight: "400",
    lineHeight: 16,
    color: "#B9B9B9",
  },
  footerView: {
    display: "flex",
    paddingVertical: 10,
    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",
  },
  rightIconView: { padding: 8, borderRadius: 48 },
  arrowIconView: {
    padding: 4.5,
    borderRadius: 48,
  },
});