import React, { Component } from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'

const Div = styled.div`
    width: 100%;
    height:100%;
    
`
const Img = styled.img`
    margin: 0 auto;
    display:block;
    width: 114px;
    height:87px; 
`
const P = styled.p`
    text-align: center;
    color: #999;
    margin-top:1rem;
    
`
/**
 * General component description in JSDoc format. Markdown is *supported*.
 */
const StocksOfEmpty = (props) => {
    let { title ,theme, img } = props;
    if(img){
        return <Div>
            {img}
            <P>
                { title }
            </P>
        </Div>
    }else {
        return <Div>
            {
                theme == 'dark' ?
                    <Img src={require("./nostock-dark.png")} alt="nostock-dark"/>
                    :
                    <Img src={require("./nostock.png")} alt="nostock"/>
            }
            <P>
                {title}
            </P>
        </Div>
    }
}
StocksOfEmpty.propTypes = {
    /* dddddd */
    title: PropTypes.string.isRequired,
}
StocksOfEmpty.defaultProps = {
    title: `您还没有添加任何自选股`,
}


export default StocksOfEmpty