import { BtnBase } from "./Button";
import styled from 'styled-components';
import React from "react";

const Button = styled(BtnBase)`
    width:90px;
    border-radius:5px;
    font-size:16px;
    font-family:MicrosoftYaHei;
    color:rgba(255,255,255,1);
    margin-left:20px;
    margin-right:20px;
`;
const Ok = styled(Button)`
    background:rgba(76,172,255,1);
`;
export const OkBtn = (props) => <Ok height="38px" {...props}>确定</Ok>;
const Cancel = styled(Button)`
    background:rgba(204,204,204,1);
`;
export const SaveBtn = (props) => <Ok height="38px" {...props}>保存</Ok>;

export const CancelBtn = (props) => <Cancel height="38px" {...props}>取消</Cancel>;
export const CenterBtnGrp = styled.div`
    margin:10px auto;
    display:flex;
    justify-content: center;
`;

const OutlineBtn = styled.div`
  min-width: 150px;
  height: 46px;
  border-radius: 28px;
  border:1px solid ${p => p.isSelected ? "rgba(76,172,255,1)" : "rgba(221,221,221,1)"};
  color:${p => p.isSelected ? "rgba(76,172,255,1)" : "rgba(51,51,51,1)"};
  font-size: 14px;
  font-family: MicrosoftYaHei;
  margin-top: 20px;
  margin-left: 47.5px;
  &:hover {
    cursor: pointer;
  }
  display: flex;
  justify-content: center;
  align-items: center;
  text-align:center;
  padding-left:15px;
  padding-right:15px;
`;

export const JobBtn = ({ children, ...props }) => {
    return <OutlineBtn {...props}>{children}</OutlineBtn>;
}
