import {ImageView} from "../../atoms"
import {ButtonProps} from "../../props"
import styles from "./styles.module.sass"

export const Button = (props: ButtonProps) => {
  const {
    children,
    wrapperClass = "",
    trailingIcon,
    leadingIcon,
    buttonType = "primary-filled",
    onClickLeadingIcon,
    onClickTrailingIcon,
  } = props

  return (
    <button className={`button-main ${styles[`button_${buttonType}`]}  ${wrapperClass} flex-center`} {...props}>
      {leadingIcon && <ImageView alt="avatar" src={leadingIcon} imgSize={20} onClick={onClickLeadingIcon} />}
      {children}
      {trailingIcon && <ImageView alt="close" src={trailingIcon} imgSize={20} onClick={onClickTrailingIcon} />}
    </button>
  )
}