import { AppShellSection, Box } from "@mantine/core";
import { IconBooks, IconGhost } from "@tabler/icons-react";
import { Outlet, useLocation } from "react-router";
import { useEffect, useState } from "react";
import PageHeader from "@/layouts/shared/page.header";

const ChatbotLayout = () => {
  const location = useLocation();
  const [activeIndex, setActiveIndex] = useState(0);

  const LINKS = [
    {
      Icon: IconBooks,
      label: "Prompts",
      href: "/admin/chatbot/prompts",
    },
    {
      Icon: IconGhost,
      label: "Agents",
      href: "/admin/chatbot/agents",
    },
  ];

  useEffect(() => {
    const currentIndex = LINKS.findIndex((item) => location.pathname.startsWith(item.href));
    setActiveIndex(currentIndex === -1 ? 0 : currentIndex);
  }, [location.pathname]);

  return (
    <AppShellSection>
      <PageHeader links={LINKS} activeIndex={activeIndex} setActiveIndex={setActiveIndex} />
      <Box py={20} px={28}>
        <Outlet />
      </Box>
    </AppShellSection>
  );
};

export default ChatbotLayout;