"use client";

import { useParams } from "next/navigation";
import { Locale } from "next-intl";
import { useRouter, usePathname } from "@/i18n/navigation";
import { useTransition } from "react";
import { cn } from "@/utlis";

const languages: { code: Locale; label: string; flag: string }[] = [
  { code: "ar", label: "العربية", flag: "/sa-flag.svg" },
  { code: "en", label: "English", flag: "/uk-flag.svg" },
];

interface LanguageSelectorProps {
  selected: string;
  onChange: (lang: string) => void;
}

export const LanguageSelector: React.FC<LanguageSelectorProps> = ({
  selected,
  onChange,
}) => {
  const router = useRouter();
  const pathname = usePathname();
  const params = useParams();
  const [, startTransition] = useTransition();

  const onSelectChange = (lang: Locale) => {
    startTransition(() => {
      router.replace(
        { pathname }, // فقط نمرر الـ pathname
        { locale: lang } // تغيير اللغة
      );
    });
    onChange(lang);
  };

  return (
    <div className="flex flex-col gap-4">
      {languages.map((lang) => (
        <button
          key={lang.code}
          onClick={() => onSelectChange(lang.code)}
          className={cn(
            "flex items-center gap-3 rounded-lg border px-4 py-3 text-left transition hover:bg-gray-50 dark:hover:bg-gray-800",
            selected === lang.code && "border-green-500 bg-green-50"
          )}
        >
          {/*  <img src={lang.flag} alt={lang.label} className="w-5 h-5" /> */}
          <span className="font-medium">{lang.label}</span>
        </button>
      ))}
    </div>
  );
};