import { ReactNode, useState } from "react";

import "./ContentCard.css";
import { SkeletonContext, SkeletonImage } from "../../index";
import { getCN, usePadding, onLoad, onSkeleton } from "../utils";

import ButtonTouch from "../ButtonTouch/ButtonTouch";

function ContentCard({
  children,
  src,
  text,
  description,
  mode = `default`, //mushroom, default
  animation = true,
  maxHeight = 150,
  onClick,
  ...props
}: {
  [x: string]: any;
}) {
  var global = false;
  if (text) global = true;
  if (description) global = true;
  return (
    <div
      {...props}
      className={getCN(
        [
          "MYUI-ContentCard",
          `MYUI-ContentCard--${mode}`,
          animation && `MYUI-ContentCard--${mode}_animation`,
          onClick && `MYUI-ContentCard--clickable`,
        ],
        props.className
      )}
    >
      <ButtonTouch
        {...props}
        ripple
        stretched
        onClick={onClick}
        clickable={onClick ? true : false}
      >
        <div className="MYUI-ContentCard__in">
          {typeof src === "string" ? (
            <>
              {src && (
                <div
                  style={{
                    background: `url(${src})`,
                    height: maxHeight,
                  }}
                  className="MYUI-ContentCard__image"
                />
              )}
            </>
          ) : (
            <div className="MYUI-ContentCard__top">{src}</div>
          )}

          {global && (
            <div className="MYUI-ContentCard__global">
              {text && (
                <div className="MYUI-ContentCard__text" children={text} />
              )}
              {description && (
                <div
                  className="MYUI-ContentCard__description"
                  children={description}
                />
              )}
            </div>
          )}
        </div>
      </ButtonTouch>
    </div>
  );
}

export default ContentCard;