import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from "styled-components";
const CubeImg = () => (_jsxs("svg", { width: "55", height: "62", viewBox: "0 0 55 62", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M53.1998 15.8677L53.1332 46.1297L27.1328 60.9975L27.2662 30.8013L53.1998 15.8677Z", fill: "#1792FF" }), _jsx("path", { d: "M27.2668 30.8013L27.1335 60.9975L1 46.1297L1.13333 15.8677L27.2668 30.8013Z", fill: "#66B7F6" }), _jsx("path", { d: "M53.2001 15.8679L27.2665 30.8016L1.13281 15.8679L27.0665 1L53.2001 15.8679Z", fill: "white" }), _jsx("path", { d: "M27.0708 1.00195L1.13724 15.8698L1.00391 46.1318L27.1375 60.9997L53.1377 46.1318L53.2044 15.8698L27.0708 1.00195Z", stroke: "#001423", strokeWidth: "2", strokeLinejoin: "round" }), _jsx("path", { d: "M1.13672 15.8677L27.2705 30.8013L27.1371 60.9975", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M53.2031 15.8677L27.2695 30.8013", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] }));
const CubeArrow = ({ className }) => (_jsxs("svg", { className: className, width: "6", height: "17", viewBox: "0 0 6 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M3 1V12", stroke: "#CCDAE9", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M3.00383 17L5.98467 15.242L6 11.6636L2.99617 9.90558L0.00766375 11.6636L1.44398e-06 15.242L3.00383 17Z", fill: "#CCDAE9" })] }));
const CubeWrapper = styled.div `
  margin-top: 14px;
  margin-bottom: 33px;

  position: relative;

  .ui-cube__arrow {
    left: calc(50% - 3px);
    top: 67px;
    position: absolute;
  }

  @media (maxWidth: 1023px) {
  }
`;
const CubeTitle = styled.div `
  fontWeight: 900;
  font-size: 8px;
  line-height: 10px;
  font-family: Heavy;

  minWidth: 21px;
  text-align: center;

  position: absolute;
  top: 34px;
  left: 3px;

  :first-of-type {
    left: 3px;
    transform: matrix(1, 0.59, -0.02, 0.89, 0, 0);
  }

  :last-of-type {
    left: 30px;
    transform: matrix(1, -0.6, 0.02, 0.89, 0, 0);
  }

  color: #ffffff;
  @media (maxWidth: 1023px) {
  }
`;
export const Cube = ({ time }) => {
    const title = time === "In production" || time === "Starting August 31"
        ? ["NOW", "2020"]
        : time.length > 7
            ? ["", ""]
            : time.split(" ");
    return (_jsxs(CubeWrapper, { children: [_jsx(CubeImg, {}), _jsx(CubeTitle, { children: title[0] }), _jsx(CubeTitle, { children: title[1] }), _jsx(CubeArrow, { className: "ui-cube__arrow" })] }));
};
//# sourceMappingURL=index.js.map