import { Color } from "@asius/base";
import { useColors } from "../../useColors";

export const Iphone = ({
  children,
  bg,
}: {
  children?: React.ReactNode;
  bg: Color;
}) => {
  const getColor = useColors();

  return (
    <div style={{ position: "relative", height: "100%" }}>
      <div
        style={{
          position: "absolute",
          top: "2.1%",
          bottom: "1.8%",
          left: "5.2%",
          right: "4%",
          borderRadius: "7%",
          overflow: "hidden",
          background: getColor(bg),
        }}
      >
        {children}
      </div>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="260 145 230 460"
        fill="#000000"
        style={{ position: "relative", height: "100%" }}
      >
        <g fill="black">
          <rect fill="#ff00ff" />
          <path
            d="m 486.94 183.45 c 0 -9.2773 -3.6836 -18.18 -10.246 -24.738 c -6.5625 -6.5625 -15.461 -10.25 -24.742 -10.25 h -151.78 c -9.2812 0 -18.18 3.6875 -24.742 10.25 c -6.5625 6.5586 -10.25 15.461 -10.25 24.738 v 385.11 c 0 9.2773 3.6875 18.176 10.25 24.738 s 15.461 10.25 24.742 10.25 h 151.78 c 9.2812 0 18.18 -3.6875 24.742 -10.25 s 10.246 -15.461 10.246 -24.738 z m -53.94 -28.45 c -0.793 0 -1.5508 0.3125 -2.1133 0.875 c -0.5586 0.5586 -0.875 1.3203 -0.875 2.1133 v 1.8047 c 0 3.1055 -1.2305 6.0781 -3.4258 8.2695 c -2.1914 2.1914 -5.168 3.4258 -8.2656 3.4258 h -85.395 c -3.1016 0 -6.0742 -1.2344 -8.2695 -3.4258 c -2.1914 -2.1914 -3.4219 -5.1641 -3.4219 -8.2695 v -1.8047 c 0 -0.793 -0.3164 -1.5547 -0.875 -2.1133 c -0.5625 -0.5625 -1.3242 -0.875 -2.1133 -0.875 h -20.2456 c -6.6328 0 -12.992 2.6328 -17.68 7.3242 c -4.6914 4.6875 -7.3242 11.047 -7.3242 17.68 v 390.9958 c 0 6.6289 2.6328 12.988 7.3242 17.68 c 4.6875 4.6914 11.047 7.3242 17.68 7.3242 h 157 c 6.6289 0 12.992 -2.6328 17.68 -7.3242 c 4.6914 -4.6914 7.3242 -11.051 7.3242 -17.68 v -391 c 0 -6.6328 -2.6328 -12.992 -7.3242 -17.68 c -4.6875 -4.6914 -11.051 -7.3242 -17.68 -7.3242 z z z"
            fillRule="evenodd"
          />

          <path
            d="m267.1 220.58h-1.8555c-0.58594 0-1.1484 0.23047-1.5664 0.64844-0.41406 0.41406-0.64844 0.97656-0.64844 1.5664v11.855c0 0.58984 0.23438 1.1523 0.64844 1.5703 0.41797 0.41406 0.98047 0.64844 1.5664 0.64844h1.8555z"
            fillRule="evenodd"
          />
          <path
            d="m267.1 253.68h-1.8555c-0.58594 0-1.1484 0.23438-1.5664 0.64844-0.41406 0.41797-0.64844 0.98047-0.64844 1.5664v28.676c0 0.58594 0.23438 1.1523 0.64844 1.5664 0.41797 0.41406 0.98047 0.64844 1.5664 0.64844h1.8555z"
            fillRule="evenodd"
          />
          <path
            d="m267.1 296.77h-1.8555c-0.58594 0-1.1484 0.23437-1.5664 0.64844-0.41406 0.41797-0.64844 0.98047-0.64844 1.5664v28.676c0 0.58594 0.23438 1.1523 0.64844 1.5664 0.41797 0.41406 0.98047 0.64844 1.5664 0.64844h1.8555z"
            fillRule="evenodd"
          />
          <path
            d="m488.98 267.46c0-0.58984-0.23437-1.1523-0.64844-1.5664-0.41797-0.41797-0.98047-0.64844-1.5703-0.64844h-1.8516v53.598h1.8516c0.58984 0 1.1523-0.23438 1.5703-0.64844 0.41406-0.41406 0.64844-0.98047 0.64844-1.5664v-49.168z"
            fillRule="evenodd"
          />
        </g>
      </svg>
    </div>
  );
};