import Iframe from 'react-iframe'

const Futures: React.FC = () => {
  return (
    <>
      <div className="sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-2 container grid gap-8 pt-6 mx-auto">
        <div>
          <Iframe
            width="100%"
            height="420"
            url="https://embed.theblockcrypto.com/data/crypto-markets/futures/btc-funding-rates/embed"
            title="BTC Funding Rates (7DMA, APY)"
          ></Iframe>
        </div>
        <div>
          <Iframe
            width="100%"
            height="420"
            url="https://embed.theblockcrypto.com/data/crypto-markets/futures/eth-funding-rates/embed"
            title="ETH Funding Rates (7DMA, APY)"
          ></Iframe>
        </div>

        <div>
          <Iframe
            width="100%"
            height="420"
            url="https://embed.theblockcrypto.com/data/crypto-markets/futures/btc-long-short-ratio-on-binance/embed"
            title="BTC Long/Short Ratio on Binance"
          ></Iframe>
        </div>

        <div>
          <Iframe
            width="100%"
            height="420"
            url="https://embed.theblockcrypto.com/data/crypto-markets/futures/btc-liquidations/embed"
            title="BTC Liquidations"
          ></Iframe>
        </div>
      </div>
    </>
  )
}

export default Futures
