import Button from '@hashicorp/react-button'

export default function BasicHero({
  heading,
  content,
  links,
  brand,
  backgroundImage,
}) {
  return (
    <div className={`g-basic-hero ${backgroundImage ? 'has-background' : ''}`}>
      <div className="g-grid-container">
        <h1 className="g-type-display-1">{heading}</h1>
        {content && <p className="g-type-body-large">{content}</p>}
        {links && links.length > 0 && (
          <div className="links">
            {links.map((link, stableIdx) => {
              const buttonVariant = stableIdx === 0 ? 'primary' : 'secondary'
              const linkType = link.type || 'inbound'
              return (
                <Button
                  // eslint-disable-next-line react/no-array-index-key
                  key={stableIdx}
                  linkType={linkType}
                  theme={{
                    variant: buttonVariant,
                    brand,
                    background: 'light',
                  }}
                  title={link.text}
                  url={link.url}
                />
              )
            })}
          </div>
        )}
      </div>
    </div>
  )
}