import React from "react";
import { Icon } from "@ax/components";

import * as S from "./style";

const FloatingButton = (props: IFloatingButtonProps): JSX.Element => {
	const { icon: iconName, text, size, disabled, onClick } = props;

	const handleOnClick = (e: React.MouseEvent<HTMLButtonElement>) => {
		if (onClick) {
			e.preventDefault();
			onClick(e);
		}
	};

	return (
		<S.Wrapper size={size} disabled={disabled} onClick={handleOnClick} longButton={!!text}>
			{text && <S.Text>{text}</S.Text>}
			<S.IconWrapper>
				<Icon name={iconName} size={size === "S" ? "16" : "24"} />
			</S.IconWrapper>
		</S.Wrapper>
	);
};

export interface IFloatingButtonProps {
	icon: string;
	size: "S" | "M";
	disabled?: boolean;
	text?: string;
	onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
}

export default FloatingButton;
