import React from "react";
import Avatar, { IAvatar } from "../Avatar/Avatar";
import ButtonTouch, { IButtonTouch } from "../ButtonTouch/ButtonTouch";
import { getClassName } from "../utils";

import './IconWidget.css'

export type IIconWidget = {
  children: React.ReactNode,
  src: IAvatar["src"],
  mode?: "s" | "m" | "l",
  onClick?: IButtonTouch["onClick"],

  //...resProps
  propsAvatar?: IAvatar
  propsButtonTouch?: IButtonTouch

  className?: string;
}

const IconWidget = ({
  children,
  src,
  mode = `s`,
  className,
  onClick,

  propsButtonTouch,
  propsAvatar = {
    mode: `app`,
    size: window.innerHeight
  },
  ...resProps
}: IIconWidget) => {

  return <div {...resProps} className={getClassName(`IconWidget`, className)}>
    <ButtonTouch stretched onClick={onClick} {...propsButtonTouch}>
      <div data-mode={mode} className={getClassName(`IconWidget__in`)}>
        <div className={getClassName(`IconWidget__avatar`)}>
          <Avatar src={src} {...propsAvatar} />
        </div>
        <div className={getClassName(`IconWidget__children`)}>{children}</div>
      </div>
    </ButtonTouch>
  </div>

}

export default IconWidget;