export function DayTrendChart({ data }: { data: { day: string; count: number }[] }) {
  if (data.length === 0) return null;
  const max = Math.max(1, ...data.map((d) => d.count));
  const total = data.reduce((sum, d) => sum + d.count, 0);

  return (
    <div>
      <p className="text-xs text-[var(--rk-ink-muted)] mb-3">
        Letzte {data.length} Tage: <span className="text-sky-400">{total} Aufrufe</span>
      </p>
      <div className="flex items-end gap-[3px] h-28">
        {data.map((d) => (
          <div key={d.day} className="flex-1 flex flex-col items-center justify-end gap-1 group relative">
            <div
              className="w-full rounded-t bg-sky-400/70 group-hover:bg-sky-400 transition-colors min-h-[2px]"
              style={{ height: `${Math.max(2, (d.count / max) * 100)}%` }}
            />
            <div className="absolute -top-6 opacity-0 group-hover:opacity-100 transition-opacity text-[0.6rem] bg-[var(--rk-bg)] border border-white/15 rounded px-1.5 py-0.5 whitespace-nowrap pointer-events-none z-10">
              {d.day.slice(5)}: {d.count}
            </div>
          </div>
        ))}
      </div>
      <div className="flex gap-[3px] mt-1.5">
        {data.map((d, i) => (
          <span key={d.day} className="flex-1 text-center text-[0.55rem] text-[var(--rk-ink-muted)] truncate">
            {i % 5 === 0 ? d.day.slice(5) : ""}
          </span>
        ))}
      </div>
    </div>
  );
}