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

type PageButtonProps = {
  active: boolean;
};

const PageButton = styled(Button)<PageButtonProps>`
  background-color: transparent;
  padding: 0;
  color: #999;
  font-size: 1rem;
  font-weight: 500;
  height: fit-content;
  transition: color 100ms ease-in-out;

  ${({ active }) => {
    return (
      active &&
      css`
        color: #5e3fc4;
      `
    );
  }}
`;

export default PageButton;