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

const styles = StyleSheet.create({
  container: {
    marginHorizontal: windowWidth(0),
    flex: 1,
  },
  title: {
    fontFamily: appFonts.semiBold,
    marginVertical: windowHeight(10),
  },
  flatListContainer: { marginHorizontal: windowHeight(0) },
  border: {
    borderBottomWidth: windowHeight(0.9),
    width: "100%",
  },
  vehicleItem: {
    alignItems: "center",
    marginRight: windowWidth(20),
    borderRadius: windowHeight(12),
    width: windowWidth(145),
    height: windowHeight(90),
    justifyContent: "center",
    borderWidth: windowWidth(2),
  },
  vehicleImage: {
    width: windowHeight(38),
    height: windowHeight(38),
    borderRadius: windowHeight(6),
    resizeMode: "contain",
  },
  vehicleName: {
    fontFamily: appFonts.regular,
    marginTop: windowHeight(5),
  },
  selectedVehicleItem: {
    borderColor: appColors.primary,
  },
  listContainer: {
    borderWidth: windowHeight(1),
    marginHorizontal: windowWidth(18.9),
    borderRadius: windowWidth(25),
    marginTop: windowHeight(8),
    paddingTop: windowHeight(10),
    paddingHorizontal: windowWidth(15),
    marginBottom: windowHeight(5),
  },
  titleContainer: {
    justifyContent: "space-between",
    padding: windowWidth(4),
    marginVertical: windowHeight(5),
  },
  carBrand: {
    fontFamily: appFonts.medium,
    fontSize: fontSizes.FONT22,
  },
  carImg: {
    height: windowHeight(120),
    width: "100%",
    borderRadius: windowHeight(15),
    marginBottom: windowHeight(1.5),
    resizeMode: "cover",
    position: "absolute",
    alignSelf: "center",
    marginTop: windowWidth(20),
  },
  descContainer: {
    justifyContent: "space-between",
    marginHorizontal: windowWidth(3),
  },
  descContainer1: {
    justifyContent: "space-between",
    marginHorizontal: windowWidth(3),
    marginTop: windowWidth(13),
  },
  engineInfo: {
    color: appColors.regularText,
    fontFamily: appFonts.regular,
    width: windowWidth(260),
  },
  rentPrice: {
    color: appColors.price,
    fontFamily: appFonts.semiBold,
    fontSize: fontSizes.FONT22,
  },
  perDay: {
    color: appColors.regularText,
    fontFamily: appFonts.medium,
    fontSize: fontSizes.FONT16,
  },
  dashLine: {
    borderBottomWidth: windowHeight(1.5),
    marginVertical: windowHeight(8),
    marginHorizontal: windowWidth(3),
  },
  driverTitle: {
    fontFamily: appFonts.semiBold,
    fontSize: fontSizes.FONT20,
  },
  tagContainer: {
    flexWrap: "wrap",
    marginVertical: windowHeight(6),
  },
  iconBox: {
    padding: windowWidth(10),
    borderRadius: windowWidth(70),
    alignItems: "center",
    marginBottom: windowHeight(8.5),
    marginHorizontal: windowWidth(7),
  },
  iconTitle: {
    color: appColors.regularText,
    marginLeft: windowWidth(9),
    fontFamily: appFonts.medium,
  },
  noData: {
    height: windowHeight(300),
    width: windowWidth(300),
    resizeMode: "contain",
  },
  noDateContainer: {
    alignItems: "center",
    justifyContent: "center",
    flex: 0.6,
  },
  listDateContainer: {
    flex: 0.82,
    marginTop: windowWidth(20),
  },
  vehicleContainer: {
    flex: 0.28,
    borderWidth: windowWidth(1),
    marginHorizontal: windowWidth(20),
    marginTop: windowHeight(15),
    borderRadius: windowWidth(25),
    paddingHorizontal: windowWidth(25),
    paddingTop: windowWidth(4),
  },
  titles: {
    color: appColors.primaryText,
    fontFamily: appFonts.medium,
  },
  subTitle: {
    color: appColors.regularText,
    fontFamily: appFonts.regular,
    textAlign: "center",
    paddingHorizontal: windowWidth(10),
    marginTop: windowHeight(6),
  },
  direction: {
    justifyContent: "center",
    alignItems: "center",
  },
  starIcon: {},
  icon: {
    marginHorizontal: windowWidth(5),
    alignItems: "center",
    justifyContent: "center",
  },
  rating: {
    color: appColors.regularText,
    fontFamily: appFonts.regular,
  },
  listStyle: { paddingBottom: windowHeight(18.6) },
  image: {
    height: windowHeight(50),
    width: windowWidth(100),
    borderRadius: windowWidth(5),
    alignItems: "center",
    justifyContent: "center",
  },
  leftArrow: {
    position: "absolute",
    left: -10,
    zIndex: 10,
    backgroundColor: "white",
    width: 30,
    height: 30,
    borderRadius: 15,
    alignItems: "center",
    justifyContent: "center",
    shadowColor: "#000",
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
    marginTop: windowHeight(25),
  },

  rightArrow: {
    position: "absolute",
    right: -10,
    zIndex: 10,
    backgroundColor: "white",
    width: 30,
    height: 30,
    borderRadius: 15,
    alignItems: "center",
    justifyContent: "center",
    shadowColor: "#000",
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
    marginTop: windowHeight(25),
    transform: [{ rotate: "-180deg" }],
  },

  arrowText: {
    fontSize: 18,
    fontWeight: "bold",
  },
  starRound: {
    paddingVertical: windowHeight(5),
    paddingHorizontal: windowWidth(15),
    alignItems: "center",
    justifyContent: "center",
    borderRadius: windowWidth(88),
    backgroundColor: appColors.alertBg,
    position: "absolute",
    alignSelf: "flex-end",
    marginHorizontal: windowWidth(29),
    marginTop: windowHeight(20),
  },
  round: {
    marginTop: windowHeight(85),
    alignSelf: "center",
    zIndex: 3,
    borderRadius: windowWidth(20),
    paddingHorizontal: windowWidth(10),
  },
});

export default styles;
