import React from 'react';
import styled from 'styled-components';

import './styles/Questions.css';

const MainSection = styled.section`
    display: flex;
    justify-content: space-between;
    margin-top: 55px;
`;

const Button = styled.button`
    width: 323px;
    height: fit-content;
    padding: 2% 5% 2% 3%;
    border-radius: 12px;
    text-align: left;

    & h3 {
        font-size: 18px;
        color: #fff;
    }
    & p {
        margin-top: 16px;
        font-size: 16px;
        line-height: 19px;
        color: #fff;
    }
`;

const OrangeButton = styled(Button)`
    background: linear-gradient(180deg, #F76D09 0%, #FFA800 100%);
    &:active {
        background: linear-gradient(180deg, #FFA800 0%, #F76D09 100%);
    }
`;

const GreenButton = styled(Button)`
    background: linear-gradient(180deg, #107A34 0%, #51A633 100%);
    &:active {
        background: linear-gradient(180deg, #51A633 0%, #107A34 100%);
    }
`;

const BlueButton = styled(Button)`
    background: linear-gradient(180deg, #2E50A7 0%, #0993F7 100%);
    &:active {
        background: linear-gradient(180deg, #0993F7 0%, #2E50A7 100%);
    }
`;

const Questions = function () {
    return (
        <MainSection>
            <OrangeButton>
                <h3>Рестик или кафешка?</h3>
                <p>Какой общепит предпочтительнее для вас возле жилища?</p>
            </OrangeButton>
            <GreenButton>
                <h3>Двушка или однушка?</h3>
                <p>Как выбрать квартиру под себя, чтобы не переплачивать?</p>
            </GreenButton>
            <BlueButton>
                <h3>Совмещенный или отдельно?</h3>
                <p>Какой санузел будет для вас лучшим вариантом?</p>
            </BlueButton>
        </MainSection>  
    );
}

export default Questions;