"use client";

import type { Units } from "@/lib/display";
import { sectionHeading } from "@/lib/styles";
import type { WeatherReport } from "@/lib/weather/types";
import { ChoiceChips } from "../ui/ChoiceChips";
import { DailyView } from "./DailyView";
import { HourlyView } from "./HourlyView";

export type ForecastView = "hourly" | "daily";

/** The forecast section with a switch between the hourly and daily views. */
export function ForecastPanel({ report, units, view, onViewChange, providerLabel, maxDaysOnPlan }: {
  report: WeatherReport;
  units: Units;
  view: ForecastView;
  onViewChange: (view: ForecastView) => void;
  providerLabel: string;
  maxDaysOnPlan: number;
}) {
  return (
    <section aria-labelledby="forecast-heading" className="flex flex-col gap-3">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div className="flex min-w-0 flex-1 items-center gap-3">
          <h2 id="forecast-heading" className={sectionHeading}>
            The days ahead
          </h2>
          <span className="hidden h-px flex-1 bg-linear-to-r from-gold-dim/70 to-transparent sm:block" aria-hidden="true" />
        </div>
        <ChoiceChips
          legend="Forecast view"
          selected={view}
          onChange={onViewChange}
          choices={[
            { value: "hourly", label: "Hourly" },
            { value: "daily", label: "Daily", note: `${report.daily.length}d` },
          ]}
        />
      </div>

      {view === "hourly" ? (
        <HourlyView hourly={report.hourly} stepHours={report.hourlyStepHours} units={units} timeZone={report.timeZone} />
      ) : (
        <DailyView daily={report.daily} units={units} timeZone={report.timeZone} providerLabel={providerLabel} maxDaysOnPlan={maxDaysOnPlan} />
      )}
    </section>
  );
}