import React from 'react';
import Styled from 'styled-components/native';
import Theme from '~/Themes';

const InfoContainer = Styled.View`
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    height: 40px;
    width: 100%;
    border: 0px solid #e9e9e9;
    border-bottom-width:1px;
`;
const InfoIcon = Styled.View`
    width: 20px;
    height: 10px;
    border-radius: 5px;
    margin-right: 5px;
`;
const InfoText = Styled.Text`
    font-family: ${Theme.Fonts.Regular};
    font-size: 14;
    line-height: 20;
    letter-spacing: -1.4;
    margin-right: 15;
`;

export const WorkInfo = ({style}) => {
    return (
        <InfoContainer style={[style]}>
            <InfoIcon style={{backgroundColor: Theme.WorkTypeColor["정기점검"]}} />
            <InfoText>정기</InfoText>
            <InfoIcon style={{backgroundColor: Theme.WorkTypeColor["법정검사"]}} />
            <InfoText>법정</InfoText>
            <InfoIcon style={{backgroundColor: Theme.WorkTypeColor["수시점검"]}} />
            <InfoText>수시</InfoText>
            <InfoIcon style={{backgroundColor: Theme.WorkTypeColor["공사작업"]}} />
            <InfoText>공사</InfoText>
            <InfoIcon style={{backgroundColor: Theme.WorkTypeColor["법정교육"]}} />
            <InfoText>교육</InfoText>
        </InfoContainer>
    )
}