"use client";

interface Conversion {
  id: number;
  month: string;
  conversions: number;
}

export default function MonthlyConversionsChart({ data }: { data: Conversion[] }) {
  const max = Math.max(...data.map((d) => d.conversions), 1);

  return (
    <div className="bg-white border border-slate-100 rounded-xl overflow-hidden">
      <div className="px-4 py-3 border-b border-slate-100">
        <h2 className="text-sm font-bold text-slate-900">Monthly Conversions</h2>
      </div>
      <div className="p-4">
        <div className="flex items-end gap-2 h-28">
          {data.map((item, i) => {
            const height = Math.max(4, Math.round((item.conversions / max) * 100));
            return (
              <div key={item.id} className="flex flex-col items-center gap-1 flex-1 group">
                <span className="text-[9px] text-slate-500 font-medium opacity-0 group-hover:opacity-100 transition-opacity">
                  {item.conversions}
                </span>
                <div
                  className="w-full rounded-t-md bg-purple-500 hover:bg-purple-600 transition-all cursor-pointer bar-animate"
                  style={{
                    height: `${height}%`,
                    animationDelay: `${i * 80}ms`,
                    minHeight: 4,
                  }}
                  title={`${item.month}: ${item.conversions}`}
                />
                <span className="text-[9px] text-slate-400">{item.month}</span>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}