{"size": 727, "ext": "js", "max_stars_repo_path": "src/components/button.js", "max_stars_repo_name": "Nico2d/profesorek-frontend", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/button.js", "max_issues_repo_name": "Nico2d/profesorek-frontend", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/button.js", "max_forks_repo_name": "Nico2d/profesorek-frontend", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 24.2333333333, "max_line_length": 64, "alphanum_fraction": 0.6024759285}
import React from "react"
import styled from "styled-components"

export const StyledButton = styled.button`
  background: ${props =>
    props.disabled
      ? ({ theme }) => theme.disableColor
      : ({ theme }) => theme.primary};
  color: ${({ theme }) => theme.whiteToBlack};
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 4rem;
  border: none;
  font-weight: bold;
  cursor: ${props => (props.disabled ? "default" : "pointer")};
  font-size: ${({ theme }) => theme.fontSize}px;

  &:active,
  &:focus {
    border: none;
  }
`

const Button = ({ children, ...rest }) => {
  return <StyledButton {...rest}>{children}</StyledButton>
}

export default Button
