import type { ReactNode } from 'react';
import React from 'react';

import type { RichText } from '../../types';
import { H2 } from '../Typography/H2/H2';
import { Paragraph } from '../Typography/Paragraph/Paragraph';

export interface CTABannerProps {
  /**
   * Action text of the banner button.
   */
  action?: ReactNode;
  /**
   * Content of the banner.
   */
  description?: RichText;
  /**
   * Title of the banner.
   */
  title?: string;
}

export const CTABanner: React.FC<CTABannerProps> = ({ action, description, title, ...rest }) => {
  return (
    <div className='ctaBanner' {...rest}>
      <div className='ctaBanner__content'>
        {title && (
          <H2 appearance='h1' divider={false}>
            {title}
          </H2>
        )}
        {typeof description === 'string' ? <Paragraph>{description}</Paragraph> : description}
      </div>
      {action}
    </div>
  );
};