import { CSSProperties } from 'glamor';
import { observer } from 'mobx-react';
import { BsX } from 'react-icons/bs';
import { useApphouse } from '../../context/useApphouse';
import {
  ButtonStyleVariant,
  IconSizeTokensType
} from '../../styles/defaults/themes.interface';
import { Button } from '../Button';
import { StyleOverwrites } from '../component.interfaces';
import React from 'react';
import { mergeStyles } from '../../styles/mergeStyles';

type ButtonCloseStyles = CSSProperties;

export interface ButtonCloseProps extends StyleOverwrites<ButtonCloseStyles> {
  /**
   * The action to perform when the button is clicked.
   */
  onClick: () => void;
  /**
   * The size of the close icon
   * @optional
   * @default "l"
   */
  size?: keyof IconSizeTokensType;
  /**
   * variant of the button
   * @default "clear"
   */
  variant?: keyof ButtonStyleVariant;
}
/**
 * The ButtonClose Component.
 *
 * `npm install apphouse`
 * `import { ButtonClose } from 'apphouse'`;
 */
export const ButtonClose: React.FC<ButtonCloseProps> = observer(
  ({ onClick, variant = 'clear', styleOverwrites, size = 'l' }) => {
    const { theme } = useApphouse();
    const { tokens } = theme;
    return (
      <Button
        variant={variant}
        onClick={() => onClick && onClick()}
        data-style="ah-btn-close"
        styleOverwrites={mergeStyles({ border: 0 }, styleOverwrites)}
        title="Close"
      >
        <BsX size={tokens.iconSize[size]} />
      </Button>
    );
  }
);