import { ResolvedCell, cellProjectLabel } from "../lib/queries/plan";
import type { Project } from "../lib/queries/projects";

interface Props {
  cell: ResolvedCell | null;
  project: Project | null;
  readonly?: boolean;
  categoryLabel: string;
}

export default function PlanRangeChips({
  cell,
  project,
  readonly,
  categoryLabel,
}: Props) {
  void readonly;
  if (!cell) return null;
  // Prefer the server-embedded project label (always present). Fall back to
  // the looked-up `project` prop only if the cell predates the embed (stale
  // cache).
  const fallbackLabel = project
    ? project.project_number
      ? `${project.project_number} — ${project.name}`
      : project.name
    : null;
  const projectLabel = cellProjectLabel(cell) ?? fallbackLabel;
  const projectTitle = projectLabel ?? undefined;
  return (
    <div className="plan-chip-block">
      <div className="plan-chip-line">
        <span className="plan-chip">{categoryLabel}</span>
        {projectLabel && (
          <span className="plan-chip-project" title={projectTitle}>
            {projectLabel}
          </span>
        )}
      </div>
      {cell.note && <div className="plan-cell-note">{cell.note}</div>}
    </div>
  );
}