import React from 'react';
import GatsbyImg from 'gatsby-core-theme/src/hooks/gatsby-img';
import styles from './default.module.scss';

export default function index({ page }) {
  return (
    <div className={`${styles.container} ${page.path === '/' ? styles.homepage : ''}`}>
      <div>
        <h1>{page.title}</h1>
        <div
          className={styles.description}
          dangerouslySetInnerHTML={{ __html: page?.description }}
        />
      </div>
      <GatsbyImg
        className={styles.bgImage}
        filename="homepage-bg.jpg"
        alt={page.title}
        customStyle={{
          width: '80%',
          right: 0,
          position: 'absolute',
          top: '0',
          zIndex: -1,
          maxHeight: '100%',
        }}
      />
    </div>
  );
}
