import { ReactNode } from "react";

import "./Card.css";

import { getCN, usePadding, renderProps } from "../utils";

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

function Card({
  children,
  mode = "default", //default, shadow
  ripple,
  onClick,
  ...props
}: {
  props?: any;
  [x: string]: any;
}) {
  return (
    <div
      {...renderProps(props)}
      className={getCN(["MYUI-Card", `MYUI-Card--${mode}`], props.className)}
    >
      <ButtonTouch componentName="MYUI-Card--ButtonTouch" {...props} ripple={ripple} onClick={onClick}>
        <div className="MYUI-Card--ButtonTouch">{children}</div>
      </ButtonTouch>
    </div>
  );
}

export default Card;