import { Button } from 'antd'
import { ButtonProps } from 'antd/lib/button/button'
import React from 'react'
import styled from 'styled-components'
import { darken, lighten } from './color.change'

interface Props extends ButtonProps {
  background: string
  highlight: string
  color: string
}

const Styled = styled(Button)`
  background: ${(props) => props.background};
  color: ${(props) => props.color};
  border-color: ${(props) => darken(props.background, 10)};

  :hover {
    color: ${(props) => props.highlight};
    background-color: ${(props) => lighten(props.background, 10)};
    border-color: ${(props) => darken(props.highlight, 10)};
  }
`

export const StyledButton: React.FC<Props> = ({ children, ...props }) => {
  return <Styled {...props}>{children}</Styled>
}