import { ActionIcon, Anchor, Breadcrumbs, Card, Group } from "@mantine/core";
import { IconChevronLeft } from "@tabler/icons-react";
import { useNavigate } from "react-router-dom";

export default function BreadCrumbs({ dataLink, back, linkBack }: { dataLink: { title: string, link: string, active: boolean }[], back?: boolean, linkBack?: string }) {
   const navigate = useNavigate();

   return (
      <Card
         radius="md"
         p="sm"
         withBorder
         style={{
            background:
               "linear-gradient(145deg, rgba(25,25,25,0.95), rgba(45,45,45,0.85))",
            borderColor: "rgba(100,100,100,0.2)",
            boxShadow: "0 0 20px rgba(0,255,200,0.08)",
         }}
      >
         <Group>
            {
               back &&
               <ActionIcon variant="outline" aria-label="Settings" radius={"lg"} onClick={() => window.history.back()}>
                  <IconChevronLeft size={20} stroke={1.5} />
               </ActionIcon>
            }
            <Breadcrumbs>
               {
                  dataLink.map((item, index) => (
                     <Anchor
                        c={item.active ? "gray.0" : "gray.5"}
                        onClick={() => item.active || item.link == "#" ? null : navigate(item.link)}
                        key={index}
                     >
                        {item.title}
                     </Anchor>
                  ))
               }
            </Breadcrumbs>
         </Group>

      </Card>
   )
}