import { AlertTriangle, Receipt } from 'lucide-react';
import { formatMoney } from './format';
import { INVOICES_SECTIONS } from './shared';
import { useInvoicesSection } from './useInvoicesSection';
import { useSummary } from './useInvoiceShelfData';

// Panel header for the right (invoices-view) panel: which section, which company, and the one figure that
// is worth seeing from every section — how much is still owed.

export const InvoicesViewHeader = () => {
  const section = useInvoicesSection();
  const { company, currency, dashboard, error } = useSummary();
  const label = INVOICES_SECTIONS.find((s) => s.id === section)?.label ?? 'Invoices';

  return (
    <>
      <Receipt className="h-3.5 w-3.5 shrink-0" />
      <span className="flex-1 truncate text-xs font-medium">
        {label}
        {company?.name && <span className="ml-1.5 font-normal text-muted-foreground">· {company.name}</span>}
      </span>
      {error ? (
        <span className="flex shrink-0 items-center gap-1 text-[10px] text-destructive">
          <AlertTriangle className="h-3 w-3" />
          unreachable
        </span>
      ) : (
        dashboard && (
          <span className="shrink-0 text-[10px] tabular-nums text-muted-foreground">
            {formatMoney(dashboard.total_amount_due, currency)} due
          </span>
        )
      )}
    </>
  );
};