import { FunctionComponent } from 'react'

const Tile: FunctionComponent = ({ children }) => {
  return (
    <div className='tile'>
      {children}
      <style jsx>{`
        .tile {
          position: relative;
          background-color: white;
          box-shadow: 0px 0px 8px 4px #0001;
          padding: 1em;
          min-width: 100%;
        }

        .tile :global(p),
        .tile :global(h2) {
          padding: 0;
          margin: 0 0 0.7em;
        }

        .tile :global(h2 .icon) {
          position: absolute;
          right: 1em;
        }

        .tile :global(.count) {
          font-size: 120%;
          font-weight: 900;
        }

        .tile :global(img) {
          max-width: 100%;
        }
      `}</style>
    </div>
  )
}

export default Tile
