import React, { PropsWithChildren } from "react";

import MuiTableRow from "@mui/material/TableRow";

import { RouterParams, useRouter } from "../../contexts/RouterContext";

export interface NavigatingTableRowProps extends PropsWithChildren {
  route: string;
  routeParams: RouterParams;
}

export const NavigatingTableRow: React.FC<NavigatingTableRowProps> = ({
  route,
  routeParams,
  children,
}) => {
  const { navigate } = useRouter();

  const onClick = () => {
    navigate(route, { params: routeParams });
  };

  return (
    <MuiTableRow hover sx={{ cursor: "pointer" }} onClick={onClick}>
      {children}
    </MuiTableRow>
  );
};