'use client'

import clsx from 'clsx'

export function BurnRateTimeline({
  monthly,
}: {
  monthly: Array<{ month: string; total_cost_usd: number; domains: number }>
}) {
  const max = Math.max(1, ...monthly.map((m) => m.total_cost_usd || 0))
  return (
    <div className="border border-white/[0.08] bg-[#020202]">
      <div className="px-4 py-3 border-b border-white/[0.08]">
        <div className="text-[10px] font-mono uppercase tracking-widest text-white/40">Burn Rate Monitor</div>
        <div className="text-sm font-bold text-white">Renewals timeline (12 months)</div>
      </div>
      <div className="p-4">
        <div className="space-y-2">
          {monthly.map((m) => {
            const pct = Math.round(((m.total_cost_usd || 0) / max) * 100)
            const isHot = m.total_cost_usd >= max * 0.7
            return (
              <div key={m.month} className="grid grid-cols-[72px_1fr_90px] gap-3 items-center">
                <div className="text-[10px] font-mono text-white/40">{m.month}</div>
                <div className="h-2 border border-white/10 bg-white/[0.02]">
                  <div
                    className={clsx('h-full', isHot ? 'bg-orange-500/80' : 'bg-white/20')}
                    style={{ width: `${pct}%` }}
                  />
                </div>
                <div className="text-[10px] font-mono text-white/50 text-right">
                  ${Math.round(m.total_cost_usd)} · {m.domains}
                </div>
              </div>
            )
          })}
        </div>
        <div className="mt-3 text-[10px] font-mono text-white/30">
          Costs are based on your portfolio renewal_cost when present; otherwise cheapest renewal from your tracked TLD price DB.
        </div>
      </div>
    </div>
  )
}

