import React from 'react';
import { createStyles } from 'antd-style';

const useStyle = createStyles(({ token, css }) => ({
  browserMockup: css`
    position: relative;
    border-top: 2em solid rgba(230, 230, 230, 0.7);
    border-radius: ${token.borderRadiusSM}px ${token.borderRadiusSM}px 0 0;
    box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28);
    &::before {
      position: absolute;
      top: -1.25em;
      left: 1em;
      display: block;
      width: 0.5em;
      height: 0.5em;
      background-color: #f44;
      border-radius: 50%;
      box-shadow:
        0 0 0 2px #f44,
        1.5em 0 0 2px #9b3,
        3em 0 0 2px #fb5;
      content: '';
    }
    &::after {
      content: '';
      display: block;
      position: absolute;
      top: -1.6em;
      left: 5.5em;
      width: calc(100% - 6em);
      height: 1.2em;
      background-color: #fff;
      border-radius: ${token.borderRadiusSM}px;
    }
    & > * {
      display: block;
    }
  `,
}));

const BrowserFrame: React.FC<React.PropsWithChildren> = ({ children }) => {
  const { styles } = useStyle();
  return <div className={styles.browserMockup}>{children}</div>;
};

export default BrowserFrame;