import { Col, Row } from "antd";
import ProText from "components/ProText";
import { useTranslation } from "react-i18next";
import { colors } from "ThemeConstants";

export default function Stepper() {
  const { t } = useTranslation();
  return (
    <>
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        <Row
          align={"middle"}
          style={{
            width: 330,
            position: "relative",
            padding: "12px",
          }}
        >
          <Col>
            <div
              style={{
                width: 12,
                height: 12,
                borderRadius: "50%",
                backgroundColor: colors.primary,
              }}
            ></div>
          </Col>
          <Col flex={"auto"}>
            <div
              style={{
                height: 1.5,
                backgroundColor: colors.primary,
                margin: "0 8px",
              }}
            ></div>
          </Col>
          <Col>
            <div
              style={{
                width: 12,
                height: 12,
                borderRadius: "50%",
                backgroundColor: colors.primary,
              }}
            ></div>
          </Col>
          <Col flex={"auto"}>
            <div
              style={{
                height: 1.5,
                backgroundColor: colors.primary,
                margin: "0 8px",
              }}
            ></div>
          </Col>
          <Col>
            {" "}
            <div
              style={{
                width: 12,
                height: 12,
                borderRadius: "50%",
                backgroundColor: "#FFF",
                border: `2px solid #BDBDBD`,
              }}
            ></div>
          </Col>
        </Row>
      </div>
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
        }}
      >
        {" "}
        <Row
          align={"middle"}
          style={{
            width: 330,
            position: "relative",
            padding: "12px",
          }}
        >
          <Col>
            <ProText>{t("order.reserved")}</ProText>
          </Col>
          <Col flex={"auto"}></Col>
          <Col>
            <ProText>{t("order.prepare")}</ProText>
          </Col>
          <Col flex={"auto"}></Col>
          <Col>
            <ProText type="secondary">{t("order.ready")}</ProText>
          </Col>
        </Row>
      </div>
    </>
  );
}