import styled from "@emotion/styled";
import { css } from "@emotion/react";
import { ButtonProps } from "./Button";

const StyledButton = styled.button<ButtonProps>`
  display: flex;
  justify-content: center;
  align-items: center;
  grid-gap: 0.5rem;
  cursor: pointer;
  border: 0;
  border-radius: 5px;
  padding: 0.5rem;
  font-size: 1rem;

  ${({ disabled }) => {
    return (
      disabled &&
      css`
        &:disabled {
          cursor: not-allowed;
        }
      `
    );
  }}

  ${({ variant }) => {
    return (
      variant === "icon" &&
      css`
        background: none;
        padding: 0;
      `
    );
  }}
`;

export default StyledButton;