import React from 'react';
import styled, { css } from 'styled-components';
import { COLORS } from '../../theme';
import { OverlayTrigger, Tooltip } from 'react-bootstrap';

interface Props {
    onClick?: () => void;
    activeButton?: boolean;
    style?: unknown;
}

const Button: React.FC<Props> = ({ children, activeButton, ...restProps }) => {
    return (
        <OverlayTrigger
            placement="right"
            delay={{ show: 250, hide: 250 }}
            overlay={
                <Tooltip id={`tooltip-${children}`}>
                    <strong>{children}</strong>
                </Tooltip>
            }>
            <ButtonWrapper activeButton={activeButton} {...restProps}>
                {children}
            </ButtonWrapper>
        </OverlayTrigger>
    );
};

export default Button;

const ButtonWrapper = styled.button`
    border: 0px;
    background: ${COLORS.WHITE};
    color: ${COLORS.TECHSOPHY_THEME};
    font-weight: bold;
    align-self: center;
    width: 140px;
    padding: 5px 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: Arial;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    height: 32px;
    border-radius: 8px;
    font-size: 12px;
    :hover {
        background: ${COLORS.ACTIVE_BUTTON};
        color: ${COLORS.WHITE};
    }
    cursor: pointer;
    ${({ activeButton }: { activeButton: boolean }): { color: string; background: string } =>
        activeButton &&
        css`
            background: ${COLORS.ACTIVE_BUTTON};
            color: ${COLORS.WHITE};
        `}
`;
