import React from 'react';

import '../../styles/global.scss';
import { BlHero, BlTeaserLink } from 'buflib';

function App() {
  return (
    <div>
      <div className="bl-container bl-container--medium bl-p-t-7">
        <BlHero
          image={{
            url: 'https://via.placeholder.com/1200x450',
            ariaText: 'test',
            credit: 'Source: via.placeholder.com',
          }}
        >
          <h2 className="bl-size-1">Welcome</h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque,
            possimus amet ipsam voluptatibus maiores eveniet perspiciatis
            voluptas nihil quaerat fuga debitis. Deleniti sint iusto voluptates,
            totam debitis hic quasi ex.
          </p>
        </BlHero>
      </div>
      <div className="bl-container bl-container--small bl-p-t-7">
        <div className="bl-grid bl-grid--three-columns">
          <div>
            <BlTeaserLink
              url="#"
              image={{
                url: 'https://via.placeholder.com/500x400',
                mobileUrl: 'https://via.placeholder.com/360x280',
                ariaText: 'Illustration',
                caption: 'Image caption',
              }}
              linkText="Text for link here"
            />
          </div>
          <div>
            <BlTeaserLink
              url="#"
              image={{
                url: 'https://via.placeholder.com/500x400',
                mobileUrl: 'https://via.placeholder.com/360x280',
                ariaText: 'Illustration',
                caption: 'Image caption',
              }}
              linkText="Text for link here"
            />
          </div>
          <div>
            <BlTeaserLink
              url="#"
              image={{
                url: 'https://via.placeholder.com/500x400',
                mobileUrl: 'https://via.placeholder.com/360x280',
                ariaText: 'Illustration',
                caption: 'Image caption',
              }}
              linkText="Text for link here"
            />
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;