import styled from "styled-components";

export const FinitaLaCommedia = ({onClose, onRefresh}: any) => {
    return <Overlay onClick={onClose}>
        <Window onClick={event => event.stopPropagation()}>
            <CloseButton type="button" aria-label="Закрыть" onClick={onClose}>
                &times;
            </CloseButton>
            <ModalContent>
                <img src="/images/broc-finita-la-commedia.png" alt="не смогли собрать корзину"/>
                <div>
                    <h2>Больше подходящих вариантов нет</h2>
                    <p>
                        Мы больше не нашли подходящих продуктов с текущими настройками.
                        Можно изменить предпочтения или попробовать собрать корзину заново
                    </p>
                </div>
                <ButtonBlock>
                    <ActiveButton onClick={onRefresh}>Пересобрать корзину</ActiveButton>
                </ButtonBlock>
            </ModalContent>
        </Window>
    </Overlay>
}

const Overlay = styled.div`
    position: fixed;
    display: flex;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.4);
    justify-content: center;
    align-items: center;
    z-index: 4;
    overflow: auto;
    height: 100svh;
`;
const Window = styled.div`
    background-color: #ffffff;
    border-radius: 20px;
    width: auto;
    max-width: 535px;
    padding: 20px 20px 40px 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 9;
`;

const CloseButton = styled.button`
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    width: 24px;
    height: 24px;
    font-weight: 300;
    line-height: 12px;
    color: #CEDFD0;
    font-size: 24px;
    cursor: pointer;
    padding: 5px;
    transition: 0.2s;

    &:hover {
        color: #ACBAAE;
    }
`;

const ModalContent = styled.div`
    padding: 20px;
    color: #0C3B2E;
    max-width: 335px;
    box-sizing: content-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: center;
    > div {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    img {
        max-width: 335px;
        text-align: center;
        margin: 0 auto;
        display: block;
    }
`;
const ButtonBlock = styled.div`
    display: flex;
    gap: 16px;
    flex-direction: column;
`;
const Button = styled.div`
    height: 54px;
    border-radius: 12px;
    text-align: center;
    background: #fff;
    color: #5EA12D;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 16px;
    cursor: pointer;

    &:hover {
        background-color: #F7FBF6;
    }

    &:active,
    &:focus {
        background-color: #EEF8EB;
        outline: none;
    }

`;
const ActiveButton = styled(Button)`
    background-color: #5EA12D;
    color: #fff;
    font-size: 16px;
    line-height: 20px;

    &:hover,
    &:focus {
        background-color: ${({theme}) => theme.colors.greenHover};
    }

    &:active {
        background-color: #4A8D19;
    }
`;