import { cssMerge } from '../../../utils/cssMerge';
import cardWrapper, {
  bodyStyles,
  buttonWrapper,
  eyebrowStyles,
  headingRow,
  headingStyles,
  imageOverlay,
} from './defaultCard.styles';
import Image from 'next/image';
import { Button } from '../../../molecules/Button';
import React from 'react';
import { DefaultCard, FeatureVariants } from './defaultCard';

export const HeadingRowCard = ({
  type,
  eyebrow,
  heading,
  headingAs,
  body,
  buttons,
  backgroundGradient,
  backgroundImage,
  mobileBackgroundImage,
  isFeatured,
  hiddenOnDesktop,
  ...props
}: DefaultCard) => {
  const H = headingAs || 'h2';
  const featured = (type + (isFeatured ? 'Featured' : 'Standard')) as FeatureVariants;
  if (!mobileBackgroundImage) {
    mobileBackgroundImage = backgroundImage;
  }

  return (
    <div className={cssMerge(cardWrapper({ type, backgroundGradient, featured, hiddenOnDesktop }))} {...props}>
      {(backgroundImage || mobileBackgroundImage) && (
        <>
          {type === 'image' && <div className={cssMerge(imageOverlay())}></div>}
          {backgroundImage && (
            <Image
              src={backgroundImage.src}
              alt=""
              fill
              className="-tw-z-20 tw-object-cover tw-rounded-2xl tw-hidden md:tw-block"
            />
          )}
          {mobileBackgroundImage && (
            <Image
              src={mobileBackgroundImage.src}
              alt=""
              fill
              className="-tw-z-20 tw-object-cover tw-rounded-2xl md:tw-hidden"
            />
          )}{' '}
        </>
      )}
      {eyebrow && <span className={cssMerge(eyebrowStyles({ type }))}>{eyebrow}</span>}
      {(buttons || heading) && (
        <div className={cssMerge(headingRow({ type }))}>
          {heading && <H className={cssMerge(headingStyles({ type }))}>{heading}</H>}
          {buttons && (
            <div className={buttonWrapper()}>
              {buttons.map(button => (
                <Button {...button} />
              ))}
            </div>
          )}
        </div>
      )}
      {body && <p className={cssMerge(bodyStyles({ type }))}>{body}</p>}
    </div>
  );
};
