tududi/frontend/components/Sidebar/SidebarAreas.tsx

import React from "react";
import { Squares2X2Icon, PlusCircleIcon } from "@heroicons/react/24/outline";
import { Location } from "react-router-dom";
import { Area } from "../../entities/Area";
import { useTranslation } from "react-i18next";

interface SidebarAreasProps {
  handleNavClick: (path: string, title: string, icon: JSX.Element) => void;
  location: Location;
  isDarkMode: boolean;
  openAreaModal: (area: Area | null) => void;
  areas: Area[];
}

const SidebarAreas: React.FC<SidebarAreasProps> = ({
  handleNavClick,
  location,
  openAreaModal,
}) => {
  const { t } = useTranslation();
  const isActiveArea = (path: string) => {
    return location.pathname === path
      ? "bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white"
      : "text-gray-700 dark:text-gray-300";
  };

  return (
    <>
      <ul className="flex flex-col space-y-1">
        {/* "AREAS" Title with Add Button */}
        <li
          className={`flex justify-between items-center px-4 py-2 rounded-md uppercase text-xs tracking-wider cursor-pointer hover:text-black dark:hover:text-white ${isActiveArea(
            "/areas"
          )}`}
          onClick={() =>
            handleNavClick(
              "/areas",
              "Areas",
              <Squares2X2Icon className="h-5 w-5 mr-2" />
            )
          }
        >
          <span className="flex items-center">
            <Squares2X2Icon className="h-5 w-5 mr-2" />
            {t('sidebar.areas')}
          </span>
          <button
            onClick={(e) => {
              e.stopPropagation();
              openAreaModal(null);
            }}
            className="text-gray-700 dark:text-gray-300 hover:text-black dark:hover:text-white focus:outline-none"
            aria-label={t('sidebar.addAreaAriaLabel')}
            title={t('sidebar.addAreaTitle')}
          >
            <PlusCircleIcon className="h-5 w-5" />
          </button>
        </li>
      </ul>
    </>
  );
};

export default SidebarAreas;