"use client";

import { leerNombre } from "@/lib/producto";
import { cn } from "@/lib/utils";

/**
 * Un producto, como se lee.
 *
 * El nombre limpio arriba, el plu abajo chiquito, y la marca que traía la descripción
 * —`**MATERIA PRIMA**` y compañía— como etiqueta al lado en vez de gritando adentro del
 * nombre. Ver `lib/producto.ts`: es presentación, el dato no se toca.
 */
export function NombreProducto({
  plu,
  descripcion,
  className,
}: {
  plu: string;
  descripcion: string | null | undefined;
  className?: string;
}) {
  const { nombre, etiqueta } = leerNombre(descripcion);

  return (
    <div className={cn("min-w-0", className)}>
      <div className="flex flex-wrap items-baseline gap-x-2 gap-y-1">
        <span className="font-medium">{nombre}</span>
        {etiqueta ? (
          <span className="rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
            {etiqueta}
          </span>
        ) : null}
      </div>
      <div className="text-xs text-muted-foreground">{plu}</div>
    </div>
  );
}