/**
 * Created by David Garcia for Finboot.
 * 
 * Custom Hero component for Docusaurus.
 */

 import clsx from 'clsx';
import React from 'react';

import Button from '../Button';
import { HeroProps } from '../types';
import styles from './styles.module.css';

export default function Hero(props:HeroProps) {
    const {
        title,
        content,
        buttonText,
        buttonLink,
        className,
    } = props;
    
    let heroButton;
    if (buttonText) {
      heroButton = (<Button
        className="button button--default button--lg"
        text={buttonText}
        link={buttonLink}
      />)
    }

    return (
      <header className={clsx('hero hero--primary', styles.heroBanner, className)}>
        <div className={clsx('container', styles.heroContainer)}>
          <h1 className="hero__title">{title}</h1>
          <p className={clsx('hero--subtitle', styles.heroSubtitle)}>{content}</p>
          <div className={clsx('buttons', styles.buttons)}>
            {heroButton}
          </div>
        </div>
      </header>
    );
  };