"use client";
import React from "react";
import { useLocale } from "next-intl";
import { useRouter } from "next/navigation";
import { cn } from "@/lib/utils";

const LocaleButton = ({
  locale,
  handleLocaleChange,
  active,
}: {
  locale: string;
  active?: boolean;
  handleLocaleChange: (value: string) => void;
}) => {
  return (
    <button
      className={cn(
        "uppercase",
        active ? "text-foreground" : "text-muted-foreground"
      )}
      onClick={() => handleLocaleChange(locale)}
    >
      {locale}
    </button>
  );
};

export default function LocaleSwitcher() {
  const locale = useLocale();

  const router = useRouter();

  const handleLocaleChange = (value: string) => {
    const currentLocale = value;
    document.cookie = `locale=${currentLocale}; path=/`;
    router.refresh();
  };
  return (
    <div>
      <LocaleButton
        locale="en"
        handleLocaleChange={handleLocaleChange}
        active={locale === "en"}
      />
      <span className="text-muted-foreground">{" / "}</span>
      <LocaleButton
        locale="de"
        handleLocaleChange={handleLocaleChange}
        active={locale === "de"}
      />
    </div>
  );
}
