web/packages/design-system/lib/components/InfoCard/InfoCard.tsx

import ButtonLink from '../ButtonLink'
import Image from '../Image'
import { Typography } from '../Typography'

import { getButtonProps } from './utils'

import { infoCardVariants } from './variants'

import styles from './infoCard.module.css'

import ImageFallback from '../ImageFallback'
import type { InfoCardProps } from './types'

export function InfoCard({
  primaryButton,
  secondaryButton,
  topTitle,
  heading,
  bodyText,
  className,
  theme,
  height,
  backgroundImage,
  topTitleAngled,
  hotelTheme,
}: InfoCardProps) {
  const classNames = infoCardVariants({
    theme,
    hotelTheme,
    topTitleAngled,
    height,
    className,
  })
  const buttonProps = getButtonProps(theme, hotelTheme)

  return (
    <div className={classNames}>
      {theme === 'Image' ? (
        <div className={styles.backgroundImageWrapper}>
          {backgroundImage ? (
            <Image
              src={backgroundImage.src}
              className={styles.backgroundImage}
              alt={backgroundImage.alt ?? ''}
              fill
              sizes="(min-width: 1367px) 700px, 900px"
              focalPoint={backgroundImage.focalPoint}
              dimensions={backgroundImage.dimensions}
            />
          ) : (
            <ImageFallback className={styles.backgroundImage} />
          )}
        </div>
      ) : null}
      <div className={styles.content}>
        <div className={styles.titleWrapper}>
          {topTitle ? (
            <Typography variant="Title/Decorative/md">
              <span className={styles.topTitle}>{topTitle}</span>
            </Typography>
          ) : null}
          <Typography variant="Title/smLowCase">
            <h3 className={styles.heading}>{heading}</h3>
          </Typography>
        </div>
        {bodyText ? (
          <Typography variant="Body/Paragraph/mdRegular">
            <p className={styles.bodyText}>{bodyText}</p>
          </Typography>
        ) : null}
        <div className={styles.buttonContainer}>
          {primaryButton ? (
            <ButtonLink
              size="sm"
              href={primaryButton.href}
              onClick={primaryButton.onClick}
              scroll={primaryButton.scrollOnClick ?? false}
              {...buttonProps.primaryButton}
            >
              {primaryButton.text}
            </ButtonLink>
          ) : null}
          {secondaryButton ? (
            <ButtonLink
              size="sm"
              href={secondaryButton.href}
              onClick={secondaryButton.onClick}
              scroll={secondaryButton.scrollOnClick ?? false}
              {...buttonProps.secondaryButton}
            >
              {secondaryButton.text}
            </ButtonLink>
          ) : null}
        </div>
      </div>
    </div>
  )
}