import type { ForecastDayTotal } from '../../types/dashboard'

type Props = {
  days: ForecastDayTotal[]
}

export function ForecastPanel({ days }: Props) {
  const max = Math.max(1, ...days.map((d) => d.kwh))

  return (
    <section className="rounded-xl border border-slate-800/90 bg-slate-900/50 p-4">
      <h3 className="text-xs font-semibold uppercase tracking-wide text-slate-500">
        Předpověď výroby FVE (7 dní)
      </h3>
      {days.length === 0 ? (
        <p className="mt-3 text-sm text-slate-500">Žádná data forecastu.</p>
      ) : (
        <ul className="mt-3 space-y-2.5">
          {days.map((d) => (
            <li key={d.date} className="flex items-center gap-3 text-sm">
              <span className="w-24 shrink-0 text-slate-400">{d.label}</span>
              <div className="h-2.5 min-w-0 flex-1 overflow-hidden rounded-full bg-slate-800">
                <div
                  className="h-full rounded-full bg-amber-500/80 transition-all"
                  style={{ width: `${Math.min(100, (d.kwh / max) * 100)}%` }}
                />
              </div>
              <span className="w-16 shrink-0 text-right tabular-nums text-amber-200/90">
                {d.kwh.toFixed(1)} kWh
              </span>
            </li>
          ))}
        </ul>
      )}
    </section>
  )
}
