import React, { ReactNode } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Link, { LinkProps } from "@material-ui/core/Link";
import { Link as RouterLink } from "react-navi";

const useStyles = makeStyles(theme => ({
  link: {
    marginRight: theme.spacing(1),
    cursor: "pointer"
  }
}));

interface Props {
  to: string;
  children: ReactNode;
}

function SimpleLink(props: Props) {
  const { to, children, ...restProps } = props;
  return (
    <a {...restProps} href={to}>
      {children}
    </a>
  );
}

function IconLink(props: LinkProps) {
  return (
    <Link {...props} component={RouterLink}>
      !SomeIcon
    </Link>
  );
}

export default function ButtonRouter() {
  const classes = useStyles();
  return (
    <>
      <Link className={classes.link}>Plain</Link>

      <Link className={classes.link} component={SimpleLink}>
        !Simple
      </Link>

      <Link
        className={classes.link}
        to="https://github.com"
        component={SimpleLink}
      >
        Simple
      </Link>

      <Link className={classes.link} component={RouterLink}>
        !Navi Router
      </Link>

      <Link
        className={classes.link}
        href="https://frontarm.com/navi"
        component={RouterLink}
      >
        Navi Router
      </Link>

      <IconLink />
    </>
  );
}