import styled from 'styled-components';
import React from 'react';
import { Icon as AdIcon } from "antd";

const Item = styled.div`
    height:57px;
    background:${p => p.isSelected ? "rgba(241,241,241,1)" : "transparent"};
    &:hover{
        cursor:pointer;
    }
    display:flex;
    justify-content:space-between;
    align-items:center;
`;
const Name = styled.div`
    color:rgba(51,51,51,1);
    font-size:16px;
    font-family:MicrosoftYaHei;
    margin-left:30px;
`;
const Icon = styled(AdIcon)`
    display:block;
    color:rgba(187,187,187,1);
    margin-right:20px;
`;

//onClick, isSelected
export default ({ children, ...props }) =>
    <Item {...props}>
        <Name>{children}</Name>
        <Icon type="right" />
    </Item>;