import React, { FC } from 'react';
import { Link, useRouteMatch } from 'react-router-dom';

import { ListItem, ListItemIcon, ListItemText } from '@material-ui/core';

type ListItemLinkProps = {
  icon: React.ReactElement;
  primary: string;
  to: string;
};
const ListItemLink: FC<ListItemLinkProps> = ({ icon, primary, to }) => {
  const match = useRouteMatch(to);
  return (
    <ListItem
      button
      component={Link}
      to={to}
      selected={match ? match.isExact : false}
    >
      <ListItemIcon>{icon}</ListItemIcon>
      <ListItemText primary={primary} />
    </ListItem>
  );
};
export default ListItemLink;