import React from 'react';
import classNames from 'classnames';

import { H1 } from '../Typography/H1/H1';
import { Paragraph } from '../Typography/Paragraph/Paragraph';

export interface PromoHeroProps {
  /** The title of the promo hero */
  title: string;
  /** The action to be displayed in the hero section (usually a Button etc.) */
  action: React.ReactNode;
  /** The description to be displayed in the hero section */
  description?: string;
  /** The image to be displayed in the hero section */
  image: string | React.ReactElement;
  /** Alt text for the hero image */
  imageAlt?: string;
  /** Whether the image should cover the entire area dedicated to the image or be contained within it
   * @default 'contain'
   */
  imageFit?: 'cover' | 'contain';
}

export const PromoHero: React.FC<PromoHeroProps> = ({
  title,
  description,
  action,
  image,
  imageAlt,
  imageFit = 'contain',
  ...rest
}) => {
  rest satisfies Record<string, never>;

  return (
    <div {...rest} className='promoHero'>
      <div className='promoHero__content'>
        <H1>{title}</H1>
        <Paragraph appearance='md'>{description}</Paragraph>
        <div className='promoHero__action'>{action}</div>
      </div>
      <div
        className={classNames('promoHero__image', {
          'promoHero__image--cover': imageFit === 'cover',
          'promoHero__image--contain': imageFit === 'contain',
        })}
      >
        {typeof image === 'string' ? <img src={image} alt={imageAlt} /> : image}
      </div>
    </div>
  );
};