"use client";

import { useState } from "react";
import { Globe } from "lucide-react";

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { useI18n, type Locale } from "@/lib/i18n";

const languages: { value: Locale; label: string }[] = [
  { value: "zh", label: "中文" },
  { value: "en", label: "English" },
];

const LanguageSwitcher = () => {
  const { locale, setLocale } = useI18n();
  const [open, setOpen] = useState(false);

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <button
          type="button"
          className="inline-flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
        >
          <Globe className="h-4 w-4" />
        </button>
      </PopoverTrigger>
      <PopoverContent className="w-32 p-1" align="end">
        <div className="flex flex-col gap-0.5">
          {languages.map((lang) => (
            <button
              key={lang.value}
              className={`w-full rounded-lg px-3 py-2 text-left text-sm transition-colors hover:bg-muted ${
                locale === lang.value
                  ? "bg-muted font-medium text-foreground"
                  : "text-muted-foreground"
              }`}
              onClick={() => {
                setLocale(lang.value);
                setOpen(false);
              }}
            >
              {lang.label}
            </button>
          ))}
        </div>
      </PopoverContent>
    </Popover>
  );
};

export default LanguageSwitcher;
