import { useWatch, type Control, type FieldPath, type FieldValues } from "react-hook-form";
import { displayValue } from "@/lib/placeholder";

interface UoMCellProps<TForm extends FieldValues> {
  control: Control<TForm>;
  /** Path to the line's unit symbol field, e.g. `lines.${index}.unitSymbol`. */
  name: FieldPath<TForm>;
}

/**
 * Renders a line's UoM symbol, subscribing only to that field via `useWatch`
 * so re-renders stay scoped to this cell instead of the whole line-items table.
 */
export function UoMCell<TForm extends FieldValues>({ control, name }: UoMCellProps<TForm>) {
  const symbol = useWatch({ control, name });
  return <>{displayValue(symbol)}</>;
}