import { jsx as o, jsxs as c } from "react/jsx-runtime";
import p from "./shells/Phone.js";
import f from "./shells/Macbook.js";
import { styled as m } from "../../Theme/index.js";
const u = {
  phone: p,
  macbook: f
};
function $({ width: e = 0, children: i, type: s = "phone", ...n }) {
  const r = s.toLowerCase(), { Shell: a, ratio: d, screenData: t, width: l } = u[r || "phone"], h = m("div")`
    position: relative;
    display: inline-block;
    width: ${e || `${l}px`};
    &:after {
      display: block;
      content: '';
      padding-bottom: ${d * 100}%;
    }
    > svg {
      display: block;
    }

    .screenshot--container {
      position: absolute;
      left: ${t.x * 100}%;
      top: ${t.y * 100}%;
      width: ${t.width * 100}%;
      height: ${t.height * 100}%;
      ${t.radius ? `border-radius: ${t.radius}` : ""};
      background-color: #fff;
      overflow: hidden;
      > img {
        display: block;
        width: 100%;
        height: 100%;
        min-width: 100%;
        min-height: 100%;
      }
    }

    .absolute-size {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  `;
  return /* @__PURE__ */ o("div", { style: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ c(h, { ...n, children: [
    /* @__PURE__ */ o(a, { className: "absolute-size" }),
    /* @__PURE__ */ o("div", { className: "screenshot--container", children: i })
  ] }) });
}
export {
  $ as default
};
