import React from 'react';
import Styled from 'styled-components/native';
import IconButton from '~/Components/UIControls/IconButton';

const Container = Styled.View`
    background-color: #011e82;
    padding-top: 50px;
`;
const TextContainer = Styled.View`
    flex-direction: column;
    padding-left: 30px;
`;
const Title = Styled.Text`
    color: #ffffff;
    font-size: 17px;
`;
const Site = Styled.View`
    flex-direction: row;
`;
const SiteName = Styled.Text`
    color: #ffffff;
    font-weight: bold;
    font-size: 25px;
`;
const SiteSelector = Styled(IconButton)`
    border-width: 1px;
    border-color: #ffffff;
    padding: 0;
    padding-left: 0;
    padding-right: 0;
    margin-left: 10;
    border-radius: 3;
    height: 28;
    margin-top: 4;
`;

export default SiteInfo = ({ style = { } }) => {
    return (
        <Container style={style}>
            <TextContainer>
                <Title>통합관리센터</Title>
                <Site>
                    <SiteName>부평사옥</SiteName>
                    <SiteSelector iconFamily="Entypo" iconName="chevron-down" color="#ffffff" size={30}
                        shadowColor="#ffffff"
                        shadowOffset={{width:2, height:2}}
                        shadowOpacity={0.8}
                        shadowRadius={5} />
                </Site>
            </TextContainer>
        </Container>
    );
}