import styled, { css } from 'styled-components'
import { GoArrow } from "./Icons"
import { respondTo } from '../utils/responsive';

export const THEMES = {
    DARK: 'dark',
    LIGHT: 'light',
    WHITE: 'white',
}

function BorderShadowButton({ text, icon, size = "m", iconPosition = 'right', className, theme = "light", onClick, rotateText = true }) {
    return (
        <StyledContainer className={className} $theme={theme} $size={size} onClick={onClick} $rotateText={rotateText}>
            {
                iconPosition === 'left' && icon
            }
            <span>{text}</span>
            {
                iconPosition === 'right' && icon
            }
        </StyledContainer>
    );
}

export const GoButton = ({ text, size, className, onClick, theme="light"}) => {
    return (
       <BorderShadowButton
            text={text}
            size={size}
            className={className}
            onClick={onClick}
            theme={theme}
            icon={<GoArrow />}
            iconPosition="right"
       />
    )
}

const getTheme = (theme) => {
    switch (theme) {
        case THEMES.DARK:
            return css`
                background: var(--main-color-e);
                color: #fff;

                &:hover {
                    background: var(--main-color-a);
                    color: #2b3247;
                }
            `;
        case THEMES.LIGHT:
            return css`
                background: #ffdf5a;
                color: #2b3247;

                &:hover {
                    background: #ffeea6;
                }
            `;
        case THEMES.WHITE:
            return css`
                background: #fff;
                color: #2b3247;

                &:hover {
                    background: #ffdf5a;
                }
            `;
        default:
            return css`
                background: var(--main-color-e);
                color: #fff;
            `;
    }
}

const StyledContainer = styled.button`
    padding: ${({ $size }) => ($size === "s" ? "12px 16px" : "20px 32px")};

    border-radius: 8px;
    background: var(--main-color-e);
    box-shadow: 5px 4px 0px 0px #2b3247;

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

    border: 3px solid var(--main-color-e);

    ${({ $theme }) => getTheme($theme)}

    ${respondTo.sm} {
        padding: ${({ $size }) => ($size === "s" ? "8px 12px" : "20px 32px")};
    }

    span {
        font-size: 20px;
        font-style: normal;
        font-weight: 700;
        line-height: 120%; /* 24px */
        font-family: "Bungee", "Noto Sans TC", sans-serif;
        transform: ${({ $rotateText }) =>
            $rotateText ? "rotate(-2deg)" : "rotate(0deg)"};
        display: inline-block;

        ${respondTo.sm} {
            font: var(--mobile-paragraph-1);
        }
    }
`;

export default BorderShadowButton;