type ChartDatum = {
  label: string;
  value: number;
  href?: string;
};

export function ChartCard({ title, data, suffix = "h" }: { title: string; data: ChartDatum[]; suffix?: string }) {
  const max = Math.max(...data.map((item) => item.value), 1);

  return (
    <section className="admin-card p-5">
      <div className="flex items-center justify-between gap-3">
        <h2 className="text-base font-semibold">{title}</h2>
        <span className="rounded-lg bg-slate-100 px-2.5 py-1 text-xs font-semibold text-slate-500 dark:bg-slate-800">{data.length} rows</span>
      </div>
      <div className="mt-5 grid gap-4">
        {data.length ? data.map((item) => {
          const content = (
            <>
            <div className="flex items-center justify-between gap-4 text-sm">
              <span className="truncate font-medium">{item.label}</span>
              <span className="text-slate-500">{item.value.toFixed(1)}{suffix}</span>
            </div>
            <div className="h-2 overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800">
              <div className="h-full rounded-full bg-brand-secondary" style={{ width: `${Math.max(4, (item.value / max) * 100)}%` }} />
            </div>
            </>
          );
          return item.href ? (
            <a className="grid gap-2 rounded-lg p-1 transition hover:bg-slate-50" href={item.href} key={item.label}>{content}</a>
          ) : (
            <div className="grid gap-2" key={item.label}>{content}</div>
          );
        }) : <p className="text-sm text-slate-500">No data for this range.</p>}
      </div>
    </section>
  );
}