"use client";

import { useApp } from "@/contexts/AppContext";
import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button } from "@heroui/react";

export default function LanguageSwitch() {
  const { language, setLanguage } = useApp();

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

  const handleSelectionChange = (key: React.Key) => {
    setLanguage(key as "zh" | "en");
  };

  return (
    <Dropdown>
      <DropdownTrigger>
        <Button
          variant="bordered"
          className="bg-bg-surface dark:bg-gray-800 border-border-normal dark:border-gray-700 min-w-10 h-10 px-3 rounded-lg"
        >
          <span className="text-sm font-medium text-text-primary dark:text-white">
            {language === "zh" ? "中" : "EN"}
          </span>
        </Button>
      </DropdownTrigger>
      <DropdownMenu
        aria-label="Language selection"
        selectedKeys={new Set([language])}
        selectionMode="single"
        onSelectionChange={(keys) => {
          const key = Array.from(keys)[0];
          if (key) handleSelectionChange(key);
        }}
      >
        {languages.map((lang) => (
          <DropdownItem key={lang.key}>{lang.label}</DropdownItem>
        ))}
      </DropdownMenu>
    </Dropdown>
  );
}