import { useTranslations, useLocale } from "next-intl";
import {
  useRouter,
  usePathname,
  pathnames,
  getPathname,
} from "@/src/navigation";

interface JobSeekerSidebarProps {}

const JobSeekerSidebar: React.FC<JobSeekerSidebarProps> = () => {
  const router = useRouter();
  const pathname = usePathname();
  const t = useTranslations("sidebar");
  const locale = useLocale() as "en" | "ro"; // Casting locale to the expected type

  const handleButtonClick = (
    path: keyof typeof pathnames,
    params?: { [key: string]: string }
  ) => {
    // Get the localized path based on the current locale
    let localizedPath = getPathname({
      locale,
      href: path,
    });

    // If params are provided, replace the placeholders in the path
    if (params) {
      localizedPath = Object.keys(params).reduce((acc, key) => {
        return acc.replace(`:${key}`, params[key]);
      }, localizedPath);
    }

    console.log(localizedPath);
    // Navigate to the constructed path
    router.push(localizedPath);
  };

  return (
    <div
      style={{
        boxSizing: "border-box",
        display: "flex",
        flexDirection: "column",
        height: "100%",
      }}
    >
      <div
        style={{
          height: "38px",
          backgroundColor: "var(--background)",
          border: "0.1px solid var(--border)",
          borderTopLeftRadius: "8px",
          borderTopRightRadius: "8px",
          padding: "2px 14px 0",
          display: "flex",
          alignItems: "center",
          justifyContent: "flex-start",
        }}
      >
        <p style={{ fontWeight: "300", fontSize: "14px", color: "#646363" }}>
          {t("myDashboard")}
        </p>
      </div>
      <div
        style={{
          backgroundColor: "var(--foreground)",
          border: "0.1px solid var(--border)",
          borderBottomLeftRadius: "8px",
          borderBottomRightRadius: "8px",
          borderTop: "none",
          padding: "14px",
          flexGrow: 1,
          maxHeight: "100%",
          overflow: "auto",
        }}
      >
        <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
          <button
            onClick={() => handleButtonClick("/user/hello", { id: "bruh" })}
          >
            Navigate
          </button>
        </div>
      </div>
    </div>
  );
};

export default JobSeekerSidebar;