import { Breadcrumbs, Grid, Typography } from "@mui/material"
import { useEffect } from "react"
import { Link } from "react-router-dom"


const CategoryOneBreadcrumbs = ({parentCategory, thisCategory}) => {
    let parentCategoryLink = null
   
    if (parentCategory) { 
        parentCategoryLink = `/category/${parentCategory._id}/${parentCategory.name}`
    }
 
    return (
      <Grid item xs={12}>
        <Breadcrumbs aria-label="breadcrumb">
  <Link underline="hover" color="inherit" to="/">
    Home
  </Link>
  {parentCategory && <Link
    underline="hover"
    color="inherit"
    to={parentCategoryLink}
  >
    {parentCategory.name}
  </Link>}
  <Typography color="text.primary">{thisCategory?.name}</Typography>
</Breadcrumbs>
</Grid>
    )

}

export default CategoryOneBreadcrumbs