import React, { ReactElement, cloneElement } from 'react';
import { BadgeProps } from '../Badges/Badge';
import { ConditionBadgeProps } from '../Badges/ConditionBadge';

export interface CardTypes {
  badge: ReactElement<BadgeProps | ConditionBadgeProps>;
  badgeTop?: `top-${string}`;
  badgeRight?: `right-${string}`;
  footerCopy?: string | null;
  headerCopy?: string | null;
  description: string;
  leftContent?: JSX.Element;
  title: string;
}

const Card = ({
  badge,
  badgeTop,
  badgeRight,
  description = 'Add a description here',
  footerCopy = null,
  headerCopy = null,
  leftContent,
  title = 'Card Title',
}: CardTypes) => (
  <section className="Card--cmpt border rounded-md p-2 flex flex-wrap relative">
    <div className="relative my-auto mb-5 md:mb-0">
      {badge && cloneElement(badge, { top: badgeTop, right: badgeRight })}
      {leftContent}
    </div>
    <div className="w-full block md:w-10/12">
      <div className="relative mr-5 w-full md:flex-1">
        <strong className="text-2xl mb-2 block">{title}</strong>
        <p className="mb-8">{description}</p>
      </div>
    </div>
    <div className="text-right text-sm relative">
      <span className="text-slate-400 inline-block mb-5">{headerCopy}</span>
      <span className="absolute bottom-0 right-0">{footerCopy}</span>
    </div>
  </section>
);

export default Card;