import React from "react";

import { Typography } from "@mui/material";

export interface PurchaseItemTitle {
  name: string;
  line_number?: number;
}

export const getPurchaseItemTitle = (items?: PurchaseItemTitle[]): React.ReactNode => {
  const normalizedItems =
    items?.filter((item) => item.line_number == null || Number.isInteger(item.line_number)) ?? [];
  const [first, ...rest] = normalizedItems;
  if (!first) {
    return "—";
  }
  if (rest.length === 0) {
    return first.name;
  }
  return (
    <>
      {first.name}{" "}
      <Typography color="text.disabled" component="span" variant="inherit">
        +{rest.length} more
      </Typography>
    </>
  );
};