"use client";

import type { ChartPoint } from "@/lib/types";
import { formatNumber } from "@/lib/utils";

export function BarList({
  data,
  labels,
}: {
  data: ChartPoint[];
  labels?: (value: string) => string;
}) {
  if (!data.length) {
    return <p className="py-6 text-center text-sm text-muted-foreground">Belum ada data</p>;
  }
  const max = Math.max(...data.map((item) => item.value), 1);
  return (
    <div className="space-y-2.5">
      {data.map((item) => (
        <div key={item.name} className="space-y-1">
          <div className="flex items-center justify-between gap-3 text-sm">
            <span className="truncate">{labels ? labels(item.name) : item.name}</span>
            <span className="shrink-0 font-semibold tabular-nums">
              {formatNumber(item.value)}
            </span>
          </div>
          <div className="h-2 overflow-hidden rounded-full bg-muted">
            <div
              className="h-full rounded-full bg-emerald-600 print:bg-emerald-700"
              style={{ width: `${(item.value / max) * 100}%` }}
            />
          </div>
        </div>
      ))}
    </div>
  );
}