import { StyleSheet } from "react-native";
import {
  appColors,
  fontSizes,
  windowHeight,
  windowWidth,
  appFonts,
} from "@src/themes";

const styles = StyleSheet.create({
  mapSection: {
    flex: 1,
    backgroundColor: appColors.primary,
  },
  closeIcon: {
    position: "absolute",
    zIndex: 2,
    right: windowHeight(1),
    backgroundColor: appColors.lightGray,
    borderRadius: windowHeight(20),
    marginBottom: windowHeight(12),
    bottom: windowHeight(8),
    height: windowHeight(20),
    width: windowHeight(20),
    alignItems: "center",
    justifyContent: "center",
  },
  card: {
    width: "100%",
    height: windowHeight(270),
    flexDirection: "column",
  },
  subContainer: {
    height: windowHeight(195),
    marginHorizontal: windowWidth(20),
    borderRadius: windowHeight(15),
    borderWidth: windowWidth(2),
    marginVertical: windowHeight(8),
  },
  profileContainer: {
    justifyContent: "space-between",
    marginHorizontal: windowWidth(15),
    marginVertical: windowHeight(12),
  },
  userImage: {
    height: windowHeight(40),
    width: windowWidth(60),
    resizeMode: "contain",
    borderRadius: windowHeight(90),
  },
  profileData: {
    marginHorizontal: windowWidth(8),
    marginVertical: windowHeight(6),
  },
  name: {
    fontFamily: appFonts.medium,
  },
  rating: {
    fontFamily: appFonts.medium,
    marginHorizontal: windowWidth(4),
  },
  review: {
    color: appColors.regularText,
    fontFamily: appFonts.medium,
  },
  message: {
    height: windowHeight(42),
    width: windowWidth(330),
    borderRadius: windowHeight(99),
    marginHorizontal: windowWidth(8),
    alignItems: "center",
    justifyContent: "center",
  },
  call: {
    height: windowHeight(35),
    width: windowWidth(50),
    backgroundColor: appColors.lightGray,
    borderRadius: windowHeight(18),
    alignItems: "center",
    justifyContent: "center",
  },
  modalBg: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  modalBgMain: {
    paddingVertical: windowHeight(16),
    paddingHorizontal: windowWidth(20),
    borderRadius: windowHeight(10),
    width: "98%",
  },
  helpView: { width: "100%", alignItems: "flex-end" },
  title: {
    textAlign: "center",
    marginBottom: windowHeight(18),
    fontSize: fontSizes.FONT20,
    fontFamily: appFonts.medium,
    marginTop: windowHeight(5),
  },
  box: {
    height: windowHeight(85),
    width: windowWidth(95),
    marginHorizontal: windowWidth(8),
    borderRadius: windowHeight(5),
    alignItems: "center",
    justifyContent: "center",
  },
  callReason: {
    textAlign: "center",
    marginTop: windowHeight(12),
    fontSize: fontSizes.FONT11,
    fontFamily: appFonts.regular,
  },
  cancelTitle: {
    textAlign: "center",
    fontFamily: appFonts.semiBold,
    fontSize: fontSizes.FONT21,
    marginVertical: windowHeight(3),
  },
  detailView: {
    width: "60%",
    height: windowHeight(50),
    justifyContent: "center",
    paddingTop: windowHeight(2.8),
  },
  texiNo: {
    fontSize: fontSizes.FONT20,
    fontFamily: appFonts.semiBold,
    marginRight: windowWidth(5),
  },
  textName: {
    fontFamily: appFonts.regular,
    marginTop: windowHeight(2.8),
  },
  pinView: {
    width: "40%",
    height: windowHeight(52),
    justifyContent: "center",
  },
  pin: {
    backgroundColor: appColors.primary,
    height: windowHeight(22),
    width: windowHeight(22),
    borderRadius: windowHeight(22),
    marginHorizontal: windowWidth(2),
    color: appColors.whiteColor,
    alignItems: "center",
    justifyContent: "center",
  },
  pinTitle: {
    color: appColors.primaryText,
    marginTop: windowHeight(2),
    marginHorizontal: windowWidth(8),
  },
  texiDetail: {
    marginHorizontal: windowWidth(15),
    marginTop: windowHeight(4),
  },
  loader: {
    height: windowHeight(50),
    alignContent: "center",
    justifyContent: "center",
  },
  container2: {
    paddingVertical: windowHeight(12.5),
    paddingHorizontal: windowWidth(20),
    borderRadius: windowHeight(7.9),
    marginBottom: windowHeight(8),
    width: "100%",
    marginTop: windowHeight(3),
  },
  container3: {
    paddingVertical: windowHeight(12.5),
    paddingHorizontal: windowWidth(20),
    borderRadius: windowHeight(7.9),
    marginBottom: windowHeight(2),
    width: "90%",
    marginTop: windowHeight(3),
    alignSelf: "center",
  },
  iconContainer: {
    justifyContent: "center",
  },
  textContainer: {
    flex: 1,
    justifyContent: "center",
  },
  text: {
    fontFamily: appFonts.regular,
  },
  border: {
    borderRightWidth: windowHeight(0.9),
    borderRightColor: appColors.primaryGray,
    height: windowHeight(12),
    marginVertical: windowHeight(4),
    marginHorizontal: windowWidth(15),
  },
  star: {
    marginVertical: windowHeight(3),
  },
  close: {
    borderRadius: windowHeight(13),
    right: windowWidth(12),
    top: windowHeight(16),
    transform: [{ translateY: -10 }],
    position: "absolute",
  },
  backBtn: {
    position: "absolute",
    height: windowWidth(90),
    width: "100%",
    zIndex: 2,
    borderBottomLeftRadius: windowWidth(20),
    borderBottomRightRadius: windowWidth(20),
    paddingHorizontal: windowHeight(15),
  },
  loadingContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  img: {
    width: 100,
    height: 100,
  },
  cancelBtnView: {
    justifyContent: "space-between",
    marginVertical: windowHeight(5),
    marginHorizontal: windowWidth(15),
  },
  icon_image_style: {
    height: 20,
    width: 20,
  },
  vehicle_map_icon: {
    width: 40,
    height: 40,
    resizeMode: "contain",
  },
  needHelpText: {
    color: appColors.primary,
    fontFamily: appFonts.medium,
    marginHorizontal: windowWidth(25),
  },
  fallbackImage: {
    height: windowHeight(40),
    width: windowWidth(60),
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: appColors.primary,
    borderRadius: windowHeight(20),
  },
  initialText: {
    fontFamily: appFonts.bold,
    color: appColors.whiteColor,
    fontSize: fontSizes.FONT24,
  },
  container: {
    width: windowHeight(38),
    height: windowHeight(38),
    backgroundColor: appColors.whiteColor,
    borderWidth: windowHeight(1),
    alignItems: "center",
    justifyContent: "center",
    borderRadius: windowHeight(38),
    marginTop: windowHeight(5),
  },
  round: {
    paddingVertical: windowHeight(6),
    paddingHorizontal: windowHeight(10),
    borderRadius: windowHeight(90),
    position: "absolute",
    zIndex: 2,
    alignSelf: "center",
    marginTop: windowHeight(100),
  },
  height: {
    height: windowHeight(8),
  },
  round1: {
    height: windowHeight(40),
    width: windowHeight(40),
    borderRadius: windowHeight(40),
    backgroundColor: appColors.alertRed,
    alignItems: "center",
    justifyContent: "center",
  },
});
export default styles;
