import React from 'react'
import { styled, Element } from '@siteone/system-core'
import { Icon } from '@siteone/pagebuilder-ui'

const StyledBorder = styled(Element)`
    border: 2px dashed #d3edff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 50px);
    margin: 25px 25px 0;
    color: #7a92a5;
    h2 {
        color: #2b5672;
        font-size: 18px;
        font-weight: bold;
    }
    p{
        padding: 10px 0;
    }
`

const EmptyDropZone = () => (
    <StyledBorder>
        <Element alignItems="center" justifyContent="space-around" flexDirection="column" display="flex">
            <Icon name="media/Camera" size="110" color="#c9e0ef"/>
            <h2>Vložte obrázek do stránky</h2>
            <p>Přetáhněte obrázky do této plochy pomocí Drag and drop nebo klikněte na tlačítko Nahrát obrázky.</p>
        </Element>
    </StyledBorder>
)

export default EmptyDropZone