"use client";

import { FC } from "react";
import { Grid, Box } from "@mui/material";
import { useRouter } from "next/navigation";
import { typography } from "@/app/_styles/theme";

interface DetailProps {
  title: string;
  entity: string;
  children: any;
}

export const Detail: FC<DetailProps> = ({ title, entity, children }) => {
  const router = useRouter();
  const { h3 } = typography;

  return (
    <Box sx={{ height: "100vh", backgroundColor: "#ddd", p: 3 }}>
      <Grid container direction="column">
        <Grid item>
          <Box sx={h3}>{title}</Box>
        </Grid>
        <Grid item>
          {children}
        </Grid>
      </Grid>
    </Box>
  );
};