export function SalesOverTimeChart({ data }: { data: { label: string; cents: number }[] }) {
  if (!data.length) return <p className="text-sm text-be-muted">No sales yet.</p>;

  const max = Math.max(...data.map((d) => d.cents), 1);
  const width = 600;
  const height = 140;
  const barWidth = width / data.length;

  return (
    <svg viewBox={`0 0 ${width} ${height}`} className="w-full h-36">
      {data.map((d, i) => {
        const barHeight = (d.cents / max) * (height - 24);
        return (
          <g key={d.label}>
            <rect
              x={i * barWidth + 2}
              y={height - 24 - barHeight}
              width={barWidth - 4}
              height={barHeight}
              rx={2}
              className="fill-[color:var(--brand-green)]"
            />
            <text
              x={i * barWidth + barWidth / 2}
              y={height - 8}
              textAnchor="middle"
              fontSize="9"
              className="fill-neutral-400"
            >
              {d.label}
            </text>
          </g>
        );
      })}
    </svg>
  );
}

export function HorizontalBarBreakdown({
  data,
}: {
  data: { label: string; value: number; sublabel?: string }[];
}) {
  const max = Math.max(...data.map((d) => d.value), 1);
  return (
    <div className="space-y-2">
      {data.map((d) => (
        <div key={d.label}>
          <div className="flex justify-between text-xs text-be-muted mb-0.5">
            <span>{d.label}</span>
            <span>{d.sublabel ?? d.value}</span>
          </div>
          <div className="h-2 rounded-full bg-be-surface-2">
            <div
              className="h-2 rounded-full bg-brand-green"
              style={{ width: `${(d.value / max) * 100}%` }}
            />
          </div>
        </div>
      ))}
    </div>
  );
}