import React from 'react';
import styled from 'styled-components';
import SVGIcon from '../UI/Icon/SVGIcon';

const ApartmentBlock = styled.div`
    width: 20%;
    margin-top: 26px;
    position:relative;
`
const ApartmentImage = styled.img`
    width: 100%;
`

const ApartmentPrice = styled.h3`
    margin-top: 16px;
    font-weight: 600;
    font-size: 20px;
    color: #222;
`

const ApartmentAddress = styled.p`
    margin-top: 16px;
    font-size: 16px;
    color: #0050A1;
`

const TransportSection = styled.div`
    display: flex;
    margin-top: 9px;
    & p {
        font-weight: 500;
        font-size: 15px;
        color: #A9A9A9;
    }
`

const TransportIcon = styled.div`
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: fit-content;
    height: 38px;
    border: 1px solid #A9A9A9;
    border-radius: 16px;
    margin-right: 8px;
    padding-right: 8px;
`

const ButtonContact = styled.button`
    width: 180px;
    height: 36px;
    background: #175FA9;
    border-radius: 12px;
    font-weight: 500;
    font-size: 16px;
    color: #fff;
    position: absolute;
    bottom:-62px;
`

const BlockApartment = function (props) {
    return (            
        <ApartmentBlock>
            <ApartmentImage src="/images/apartment.png"></ApartmentImage>
            <ApartmentPrice>{props.results.price} ₽ / мес.</ApartmentPrice>
            <ApartmentAddress>{props.results.address}</ApartmentAddress>
            <TransportSection>
                <TransportIcon>
                    <SVGIcon src='/images/icons/bus.svg' width={20} height={21} />
                    <p>{props.results.timeToBus} мин</p>                      
                </TransportIcon>
                <TransportIcon>
                    <SVGIcon src='/images/icons/train.svg' width={18} height={20} />                 
                    <p>{props.results.timeToTrain} мин</p> 
                </TransportIcon>
            </TransportSection>
            <ButtonContact>Показать контакты</ButtonContact>
        </ApartmentBlock>
    );
}

export default BlockApartment;