import { Route, Routes, useLocation } from "react-router-dom";
import { TemplateList } from "./TemplateList";
import { TemplateForm } from "./TemplateForm";
import { useTranslation } from "react-i18next";

export const TemplateConfigurationPage = () => {
  const location = useLocation();
  const { t } = useTranslation();

  const isFormPage =
    location.pathname.includes("/new") || location.pathname.includes("/edit");

  return (
    <div className="space-y-6">
      {/* Breadcrumb */}
      <div className="flex items-center gap-2 text-sm text-gray-500">
        <span>{t("webManagement", "Web Management")}</span>
        <span>/</span>
        <span className="text-gray-900 font-medium">
          {t("template.title", "Resource Configuration")}
        </span>
      </div>

      {/* Routes */}
      <Routes>
        <Route path="/" element={<TemplateList />} />
        <Route path="/templates" element={<TemplateList />} />
        <Route path="/new" element={<TemplateForm />} />
        <Route path="/edit/:id" element={<TemplateForm />} />
      </Routes>
    </div>
  );
};
