"use client";

import { fmtNum } from "@/components/NumberInput";

// نمودارِ درآمدِ ۱۴ روزِ گذشته — فقط CSS (بدون کتابخانه). میله‌های طلایی با
// نسبتِ به بیشترین مقدار؛ برچسبِ روز زیرِ هر میله و tooltipِ بومی روی هرکدام.
export default function RevenueChart({
  days,
}: {
  days: { date: string; revenue: number; count: number }[];
}) {
  if (!days.length) return null;
  const max = Math.max(...days.map((d) => d.revenue), 1);
  return (
    <div dir="ltr" role="img" aria-label="نمودار درآمدِ ۱۴ روز گذشته">
      <div className="flex items-end gap-1.5 h-28">
        {days.map((d) => {
          const pct = Math.round((d.revenue / max) * 100);
          return (
            <div
              key={d.date}
              title={`${d.date} · ${fmtNum(d.revenue)} تومان · ${d.count} خرید`}
              className="flex-1 rounded-t bg-gradient-to-t from-[var(--gold-dark)] to-[var(--gold)] transition hover:brightness-110"
              style={{ height: `${Math.max(pct, d.revenue > 0 ? 3 : 0)}%` }}
            />
          );
        })}
      </div>
      <div className="flex gap-1.5 mt-1.5">
        {days.map((d) => (
          <span
            key={d.date}
            className="flex-1 text-center text-[9px] text-[#6f90bd] leading-none"
          >
            {d.date.slice(5)}
          </span>
        ))}
      </div>
    </div>
  );
}