import { Box, Card, CardContent, Typography } from "@mui/material";
import React from "react";
import Breadcrumbs from "@mui/material/Breadcrumbs";
import Link from "@mui/material/Link";
import HomeIcon from "@mui/icons-material/Home";

// function handleClick(event: React.MouseEvent<HTMLDivElement, MouseEvent>) {
//   event.preventDefault();
//   console.info('You clicked a breadcrumb.');
// }

const TitleHeader = () => {
  return (
    <Box width={"100%"}>
      <Card sx={{ boxShadow: "none", borderRadius: "12px" }}>
        <CardContent
          sx={{
            paddingBlock: 1,
            paddingInline: 2,
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            "&:last-child": {
              paddingBottom: 1,
            },
          }}
        >
          <Typography variant="h6" color="text.primary" fontWeight={"bold"}>
            Products
          </Typography>
          <Breadcrumbs aria-label="breadcrumb">
            <Link
              fontSize={"small"}
              fontWeight={"medium"}
              underline="hover"
              color="inherit"
              href="/"
              sx={{
                display: "flex",
                alignItems: "center",
                gap: 2,
              }}
            >
              <HomeIcon fontSize="small" />
              Page
            </Link>
            <Link
              fontSize={"small"}
              fontWeight={"medium"}
              underline="hover"
              color="inherit"
              href="/material-ui/getting-started/installation/"
            >
              Product Table
            </Link>
          </Breadcrumbs>
        </CardContent>
      </Card>
    </Box>
  );
};

export default TitleHeader;