Web-Frontend/client/src/pages/home/Home.jsx

import { HStack, Flex, Box } from "@chakra-ui/react";
import { NavLink, Outlet, useLocation } from "react-router-dom";
import { SearchBar } from "../../components/dashboard/SearchBar.jsx";
import { SettingsButton } from "../../components/dashboard/SettingsButton.jsx";

export default function Home() {
  const location = useLocation();
  const isPersonalDashboard = location.pathname === "/home" || location.pathname === "/home/";

  // 1. CSS making this look like how we want it, TODO turn to theme?
  const tabStyles = {
    fontSize: "lg",
    fontWeight: "normal",
    color: "fg.muted",
    px: 4,                   // Horizontal padding
    py: 2,                   // Vertical padding
    borderBottom: "2px solid transparent",
    mb: "-2px",              // 🔥 The trick: Pulls the active border down to overlap the container's line
    transition: "all 0.2s",
    _hover: { color: "fg" },
    _activeLink: {
      color: "color",        // Or whatever your primary text color is
      borderColor: "currentColor", // The active underline
    }
  };

  return (
      <Flex direction="column" height="100%" width="100%">

        {/* 2. 🛠️ SUB HEADER: Matches your original padding and background */}
        <Flex as="header" position="sticky" top="0" zIndex="dropdown" bg="base200" p={5} align="center" justify="space-between" width="100%">

          {/* TABS CONTAINER - Replicates the Tabs.List line container */}
          <Flex borderBottom="2px solid" borderColor="border.muted" gap={2}>
            <Box as={NavLink} to="/home" end css={tabStyles}>My Dashboard</Box>
            <Box as={NavLink} to="/home/gas" css={tabStyles}>Gas</Box>
            <Box as={NavLink} to="/home/seismic" css={tabStyles}>Seismic</Box>
            <Box as={NavLink} to="/home/remote" css={tabStyles}>Remote Sensing</Box>
            <Box as={NavLink} to="/home/daily" css={tabStyles}>Daily Activity</Box>
          </Flex>

          {/* EDIT MODE BUTTONS & CONTROLS */}
          <HStack width="258px" justifyContent="flex-end">
            {isPersonalDashboard ? (
                <>
                  <SearchBar placeholder="Enter a volcano to search" size="sm" width="210px" />
                  {/* This will eventually trigger your Zustand store's edit mode! */}
                  <SettingsButton />
                </>
            ) : (
                <SearchBar placeholder="Enter a volcano to search" size="sm" width="210px" />
            )}
          </HStack>

        </Flex>

        {/* 3. 🛠️ CANVAS AREA */}
        <Flex flex="1" overflow="auto">
          <Outlet />
        </Flex>

      </Flex>
  );
}