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

export const StandardCard = ({
  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) && (
        <div className={cssMerge(imageWrapper({ type }))}>
          {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"
            />
          )}
        </div>
      )}
      {eyebrow && <span className={cssMerge(eyebrowStyles({ type }))}>{eyebrow}</span>}
      {heading && <H className={cssMerge(headingStyles({ type, featured }))}>{heading}</H>}
      {body && <p className={cssMerge(bodyStyles({ type }))}>{body}</p>}
      {buttons && (
        <div className={buttonWrapper()}>
          {buttons.map(button => (
            <Button {...button} />
          ))}
        </div>
      )}
    </div>
  );
};
