import { useTranslation } from "react-i18next";
import { MealCategory } from "@/types/recipe.types";
import { MEAL_CATEGORY_I18N_KEYS } from "@/i18n/useMealCategoryLabel";

const STYLES: Record<MealCategory, string> = {
  [MealCategory.Breakfast]: "bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-300",
  [MealCategory.SecondBreakfast]: "bg-sky-100 text-sky-800 dark:bg-sky-900/40 dark:text-sky-300",
  [MealCategory.Lunch]: "bg-brand-100 text-brand-800 dark:bg-brand-900/40 dark:text-brand-300",
  [MealCategory.Dinner]: "bg-violet-100 text-violet-800 dark:bg-violet-900/40 dark:text-violet-300",
};

interface CategoryBadgeProps {
  category: MealCategory;
}

export function CategoryBadge({ category }: CategoryBadgeProps) {
  const { t } = useTranslation();
  const labelKey = MEAL_CATEGORY_I18N_KEYS[category];

  return (
    <span
      className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-semibold ${STYLES[category] ?? ""}`}
    >
      {labelKey ? t(labelKey) : t("categories.unknown")}
    </span>
  );
}
