"use client";

import { useLocale } from "next-intl";
import { cn } from "@/lib/utils";
import {
  getMenuEnglishSubtitle,
  getMenuPrimaryName,
  type MenuNameFields,
} from "@/lib/menu-display";

type MenuItemLabelsProps = {
  item: MenuNameFields;
  className?: string;
  primaryClassName?: string;
  secondaryClassName?: string;
  lines?: 1 | 2;
};

export function MenuItemLabels({
  item,
  className,
  primaryClassName,
  secondaryClassName,
  lines = 2,
}: MenuItemLabelsProps) {
  const locale = useLocale();
  const primary = getMenuPrimaryName(item, locale);
  const english = getMenuEnglishSubtitle(item, locale);

  return (
    <div className={cn("min-w-0", className)}>
      <p
        className={cn(
          "font-medium leading-snug",
          lines === 2 ? "line-clamp-2" : "truncate",
          primaryClassName
        )}
      >
        {primary}
      </p>
      {english ? (
        <p
          className={cn(
            "mt-0.5 truncate text-[11px] text-muted-foreground",
            secondaryClassName
          )}
          dir="ltr"
        >
          {english}
        </p>
      ) : null}
    </div>
  );
}
