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

import { isTruthyNativeHtmlStructure } from '../../utils/isTruthyNativeHtmlStructure';
import type { ImageProps } from '../Image/Image';
import { H2 } from '../Typography/H2/H2';
import { Paragraph } from '../Typography/Paragraph/Paragraph';

type HTMLImageProps = Pick<ImageProps, 'src' | 'srcSet' | 'loading' | 'sizes' | 'height' | 'width'>;

export const responsivePropEnum = Object.freeze([true, 'reversed', false] as const);

export interface USPCardProps {
  /**
   * Content of the USP card.
   */
  description?: React.ReactNode;
  /**
   * Image of the card.
   */
  image?: string | HTMLImageProps;
  /** Whether the image should cover the entire area dedicated to the image or be contained within it
   * @default 'contain'
   */
  imageFit?: 'cover' | 'contain';
  /**
   * Controls whether and how the card responds to screen size.
   *
   * Card is responsive when set to `true` or `"reversed"`, in which case the card
   * will be displayed on the right side of the image.
   *
   * When set to `false`, the image and content will be displayed in a column.
   *
   * @default true
   */
  responsive?: (typeof responsivePropEnum)[number];
  /**
   * The title of the USP card.
   */
  title: string;
}

export const USPCard: React.FC<USPCardProps> = ({
  description,
  image,
  responsive = true,
  title,
  imageFit = 'contain',
  ...rest
}) => {
  rest satisfies Record<string, never>;

  const imgProps: ImageProps | undefined = image
    ? typeof image === 'string'
      ? { alt: '', src: image }
      : { ...image, alt: '' }
    : undefined;

  return (
    <div
      {...rest}
      className={classNames('uspCard', {
        'uspCard--hasImage': !!image === true,
        'uspCard--hasNoImage': !!image === false,
        'uspCard--isResponsive': responsive === true,
        'uspCard--isNotResponsive': responsive === false,
        'uspCard--isResponsiveReversed': responsive === 'reversed',
      })}
    >
      {imgProps && (
        <img
          className={classNames('uspCard__image', {
            'uspCard__image--cover': imageFit === 'cover',
            'uspCard__image--contain': imageFit === 'contain',
          })}
          loading='lazy'
          {...imgProps}
          src={imgProps.src ?? undefined}
          srcSet={imgProps.srcSet ? String(imgProps.srcSet) : undefined}
        />
      )}
      <div className='uspCard__content'>
        <H2 divider={false}>{title}</H2>
        {isTruthyNativeHtmlStructure(description) ? <Paragraph>{description}</Paragraph> : description}
      </div>
    </div>
  );
};