import { Typography } from "@material-ui/core";
import clsx from "clsx";
import React from "react";
import { useParams } from "react-router";

import useStyles from "../useStyles";
import DTCTimeline from "./DTCTimeline";

const SelfServeTab = () => {
  const { vin } = useParams();
  const classes = useStyles();

  return (
    <div className={clsx(classes.paper, classes.tableSize)}>
      <Typography variant="h6">DTC Timeline</Typography>
      <DTCTimeline id={vin} classes={classes} />
    </div >
  );
};

export default SelfServeTab;