import React from 'react';

import { styled } from 'styled-components';

const Button = (props) => {
    const {
        isActive,
        isDisabled,
        backColor,
        color,
    } = props;  

    return (
        <>
            <Block
                active={isActive}
                disabled={isDisabled}
                backColor={backColor}
                color={color}
            >확인</Block>
        </>
    );
};

export default Button;

const Block = styled.button `
    width: 130px;
    padding: 13px;
    font-size: 13px;
    border: none;
    outline: none;
    cursor: pointer;
    font-weight: bold;

    color: ${({color})=> color};
    background-color: ${(props) => props.backColor};
`;

// 확인 버튼 불 들어왔을 때
// const Block = styled.button `
//     color: #E1E3ED;
//     background-color: #00A6B5;
// `;