import { useTranslation } from "react-i18next";
import { ChevronDown } from "lucide-react";
import { useState } from "react";

interface StyleNavigationMenuProps {
  categories: Array<{
    code: string;
    label: string;
    settingIds: string[];
  }>;
  selectedCode: string | null;
  onSelectCategory: (code: string) => void;
}

export const StyleNavigationMenu: React.FC<StyleNavigationMenuProps> = ({
  categories,
  selectedCode,
  onSelectCategory,
}) => {
  const { t } = useTranslation();
  const [isOpen, setIsOpen] = useState(false);

  const selectedCategory = categories.find((cat) => cat.code === selectedCode);

  return (
    <div className="relative mb-4">
      {/* Dropdown Button */}
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="w-full flex items-center justify-between px-4 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
      >
        <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
          {selectedCategory
            ? selectedCategory.label
            : t("template.selectStyleCategory", "Select Style Category")}
        </span>
        <ChevronDown
          className={`h-4 w-4 text-gray-500 dark:text-gray-400 transition-transform ${
            isOpen ? "rotate-180" : ""
          }`}
        />
      </button>

      {/* Dropdown Menu */}
      {isOpen && (
        <div className="absolute z-10 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-64 overflow-y-auto">
          {categories.map((category) => (
            <button
              key={category.code}
              onClick={() => {
                onSelectCategory(category.code);
                setIsOpen(false);
              }}
              className={`w-full text-left px-4 py-2 text-sm hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors ${
                selectedCode === category.code
                  ? "bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300 font-medium"
                  : "text-gray-700 dark:text-gray-300"
              }`}
            >
              <div className="flex items-center justify-between">
                <span>{category.label}</span>
                <span className="text-xs text-gray-500">
                  {category.settingIds.length} {category.settingIds.length === 1 ? "setting" : "settings"}
                </span>
              </div>
            </button>
          ))}
        </div>
      )}
    </div>
  );
};