import styled, { css, keyframes } from "styled-components";

export const THEMES = {
    WHITE: "white",
    DARK: "dark",
}

function RollupButton({ theme = THEMES.WHITE, icon, text, ...props }) {
    return (
        <StyledButton $theme={theme} {...props}>
            {icon}
            <span>{text}</span>
        </StyledButton>
    );
}

const RollUpAndBack = keyframes`
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(0, -150%);
    }

    51% {
        transform: translate(0, 150%);
    }

    100% {
        transform: translate(0, 0);
    }
`;

const StyledButton = styled.button`
    ${({ $theme }) =>
        $theme === THEMES.WHITE
            ? css`
                  background: #fff;
                  color: var(--neutrals-700);
              `
            : css`
                  background: var(--neutrals-700);
                  color: #fff;
              `}

    border-radius: 8px;
    border: 1px solid var(--main-color-e);
    padding: 12px 24px;

    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 24px */

    display: flex;
    gap: 4px;
    align-items: center;

    overflow: hidden;


    &:hover {
        span {
            animation: ${RollUpAndBack} 0.5s ease-out;
        }

    }
`;

export default RollupButton;
