import React from "react";
import styled, { css } from "styled-components";
import Block from "../Block";

const StyledBlock = styled(Block)`
  transition: all ${(p) => p.theme.timming.hover} ease;

  ${ p => p.theme.spacing.button.minWidth && css`min-width: ${p.theme.spacing.button.minWidth};` }

  outline: none;
  text-transform: uppercase;
  border: 0;
  &:hover {
    cursor: pointer;
    background-color: ${(p) => p.theme.color.brand02Hover};
  }
`;

export default ({ children, padding, bgcolor,  ...others }) => {
  return (
    <StyledBlock
      p={(p) => p.theme.spacing.s}
      bgcolor={bgcolor ? bgcolor : (p) => p.theme.color.brand02}
      textColor={(p) => p.theme.color.inverse01}
      borderRadius={(p) => p.theme.radii.button}
      as="button"
      {...others}>
      {children}
    </StyledBlock>
  );
};