import React from "react";
import styled from 'styled-components';
import { Divider } from 'antd';
import { BtnBase } from "../util/Button";
import { betweenMixin } from "../util/cssMixin";

const BetweenBox = styled.div`
    ${betweenMixin}
    padding-bottom:30px;
`;
const Button = styled(BtnBase)`
    width:150px;
    border-radius:5px;
    background:rgba(76,172,255,1);
    color:rgba(255,255,255,1);
    font-size:16px;
    font-family:MicrosoftYaHeiSemibold;
    margin-top:60px;
`;
const ApplyBtn = (props) => <Button {...props} height="50px" />;

const Title = styled.div`
    font-size:28px;
    font-family:MicrosoftYaHeiSemibold;
    color:rgba(51,51,51,1);
    margin-bottom:15px;
`;
const Salary = styled.div`
    font-size:20px;
    font-family:MicrosoftYaHeiSemibold;
    color:rgba(251,72,72,1);
    margin-bottom:10px;
`;
const Company = styled.div`
    font-size:16px;
    font-family:MicrosoftYaHei;
    color:rgba(51,51,51,1);
    margin-bottom:10px;
`;
const Detail = styled.span`
    font-size:14px;
    font-family:MicrosoftYaHeiLight;
    color:rgba(136,136,136,1);
`;

const Widget = ({ data, apply }) => {
    return <BetweenBox>
        <div>
            <Title>{data.name}</Title>
            <Salary>{data.salary}/月</Salary>
            <Company>{data.company}</Company>
            <div>
                <Detail>{data.city}</Detail>
                <Divider type="vertical" />
                <Detail>{data.class}</Detail>
                <Divider type="vertical" />
                <Detail>{data.edu}</Detail>
                <Divider type="vertical" />
                <Detail>招{data.num}人</Detail>
                <Divider type="vertical" />
                <Detail>{data.time}发布</Detail>
            </div>
        </div>
        <ApplyBtn onClick={apply}>申请职位</ApplyBtn>
    </BetweenBox>;
}


export default Widget;
