import React, { Component } from "react";
import { Center } from "@builderx/utils";
import Button4 from "../symbols/button4";
import Button2 from "../symbols/button2";
import { View, StyleSheet, Text } from "react-native";

export default class Untitled extends Component {
  render() {
    return (
      <View style={styles.root}>
        <Center horizontal>
          <View style={styles.rect}>
            <Text style={styles.orsTxt}>Order Summary</Text>
            <View style={styles.rect2}>
              <View style={styles.rect3}>
                <View style={styles.rect5} />
                <View style={styles.rect6} />
                <View style={styles.rect7} />
              </View>
              <View style={styles.rect4}>
                <View style={styles.rect8} />
                <View style={styles.rect9} />
                <View style={styles.rect10} />
              </View>
            </View>
            <View style={styles.buttons}>
              <View style={styles.confirm}>
                <Button4 style={styles.confirmBtn} />
              </View>
              <View style={styles.cancel}>
                <Button2 style={styles.cancelBtn} />
              </View>
            </View>
          </View>
        </Center>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  root: {
    backgroundColor: "white",
    flex: 1
  },
  rect: {
    height: 242.08,
    width: 310,
    position: "absolute",
    backgroundColor: "rgb(230,230,230)",
    borderRadius: 15,
    flexDirection: "column",
    justifyContent: "space-around",
    top: "27.67%",
    alignItems: "baseline"
  },
  rect2: {
    width: 307,
    height: 148,
    backgroundColor: "rgb(230,230,230)",
    flexDirection: "row"
  },
  rect3: {
    flex: 0.5,
    flexDirection: "column"
  },
  rect4: {
    flex: 0.5,
    flexDirection: "column"
  },
  rect5: {
    flex: 0.33
  },
  rect6: {
    flex: 0.33
  },
  rect7: {
    flex: 0.34
  },
  rect8: {
    flex: 0.33,
    backgroundColor: "rgb(216, 216, 216)"
  },
  rect9: {
    flex: 0.33
  },
  rect10: {
    flex: 0.34
  },
  buttons: {
    width: 307,
    height: 55,
    flexDirection: "row"
  },
  confirm: {
    flex: 0.5,
    alignItems: "center"
  },
  confirmBtn: {
    width: 86,
    height: 44
  },
  cancel: {
    flex: 0.5,
    alignItems: "center"
  },
  cancelBtn: {
    width: 86,
    height: 44
  },
  orsTxt: {
    backgroundColor: "transparent",
    fontSize: 30,
    marginLeft: 21,
    marginTop: 9,
    color: "rgba(255,255,255,1)"
  }
});