"use client";

import { useTranslations } from "next-intl";
import { CATEGORY_EMOJI_GROUPS } from "@/lib/category-emoji-presets";
import { cn } from "@/lib/utils";

type CategoryEmojiPickerProps = {
  value: string;
  onChange: (emoji: string) => void;
  className?: string;
};

export function CategoryEmojiPicker({ value, onChange, className }: CategoryEmojiPickerProps) {
  const t = useTranslations("menuAdmin");

  return (
    <div className={cn("space-y-3 max-h-[min(420px,50vh)] overflow-y-auto pe-1", className)}>
      {CATEGORY_EMOJI_GROUPS.map((group) => (
        <div key={group.id} className="space-y-2">
          <p className="text-[11px] font-medium uppercase tracking-[0.06em] text-muted-foreground">
            {t(`iconEmojiGroups.${group.id}`)}
          </p>
          <div className="flex flex-wrap gap-1.5">
            {group.emojis.map((emoji, index) => {
              const selected = value.trim() === emoji;
              return (
                <button
                  key={`${group.id}-${index}-${emoji}`}
                  type="button"
                  title={emoji}
                  onClick={() => onChange(emoji)}
                  className={cn(
                    "flex h-9 w-9 items-center justify-center rounded-lg border text-lg transition-all active:scale-[0.96]",
                    selected
                      ? "border-[#0F6E56] bg-[#E1F5EE] ring-1 ring-[#0F6E56]/30"
                      : "border-border/80 bg-card hover:border-[#0F6E56]/40 hover:bg-muted/40"
                  )}
                >
                  {emoji}
                </button>
              );
            })}
          </div>
        </div>
      ))}
    </div>
  );
}
