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

import './IconApp.css'

export type IIconApp = {
  children: React.ReactNode,
  src: IAvatar["src"],
  size?: number
  onClick?: IButtonTouch["onClick"],

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

  className?: string;
}

const IconApp = ({
  children,
  src,
  size = 58,
  className,
  onClick,

  propsButtonTouch,
  propsAvatar = {
    mode: `app`
  },
  ...resProps
}: IIconApp) => {

  return <div {...resProps} className={getClassName(`IconApp`, className)}>
    <ButtonTouch onClick={onClick} {...propsButtonTouch}>
      <div className={getClassName(`IconApp__in`)}>
        <div className={getClassName(`IconApp__avatar`)}>
          <Avatar src={src} size={size} {...propsAvatar} />
        </div>
        <div className={getClassName(`IconApp__children`)}>{children}</div>
      </div>
    </ButtonTouch>
  </div>

}

export default IconApp;