import * as React from "react";
import {classes, style} from "typestyle";
import {Button, IProps as IButtonProps} from "./Button";

const classNames = {
  button: style({
    $nest: {
      "&:hover": {
        border: "1px solid #99ce3b",
        color: "#99ce3b"
      }
    },
    background: "transparent",
    border: "1px solid #FFF",
    borderRadius: "50px",
    color: "#FFF",
    cursor: "pointer",
    fontSize: 20,
    padding: "15px 30px",
    transition: "all 0.3s ease"
  })
};

export class ViewAllButton extends React.Component<IButtonProps, null> {
  public render(): JSX.Element {
    const {children, className, ...rest} = this.props;
    return (
      <Button className={classes(className, classNames.button)} {...rest}>{children}</Button>
    );
  }
}