// BaseRouterLink
import React, { forwardRef } from "react";
import {
    Link as RouterLink,
    LinkProps as RouterLinkProps
} from "react-router-dom";

export default forwardRef<HTMLAnchorElement, RouterLinkProps>((props, ref) => (
    <RouterLink innerRef={ref} {...props} />
));

// <BackButton />
import React, { FC } from "react";
import IconButton, { IconButtonProps } from "@material-ui/core/IconButton";
import BackIcon from "@material-ui/icons/ArrowBackTwoTone";
import BaseRouterLink from "./Base/BaseRouterLink";
import Box from "@material-ui/core/Box";

type Props = IconButtonProps & {
    to: string;
};

const BackButton: FC<Props> = ({ to }) => {
    return (
        <Box clone mb={2}>
            <IconButton component={BaseRouterLink} color="primary" to={to}>
                <BackIcon fontSize="small" />
            </IconButton>
        </Box>
    );
};

export default BackButton;