import { Box } from '@mui/material';
import { styled } from '../Theme';

import NFTBroken from './NFTBroken.svg?react';

export interface BrokenProps {
  children?: React.ReactNode;
}

export default function Broken({ children = 'Non-publicly accessible NFT' }: BrokenProps = {}) {
  return (
    <Root>
      <NFTBroken className="nft-display-broken-background" />
      {children && <Box className="nft-display-broken-content">{children}</Box>}
    </Root>
  );
}

const Root = styled(Box)`
  width: 100%;
  height: 100%;
  position: relative;

  .nft-display-broken-background {
    width: 100%;
    height: 100%;
  }

  .nft-display-broken-content {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    mix-blend-mode: plus-darker;
    font-size: 13px;
    color: #9aa3b0;
    text-align: center;
    text-shadow:
      0 0 2px #fff,
      0 0 2px #fff,
      0 0 2px #fff;
    user-select: none;
  }
`;
