"use client";

import { MapPinned } from "lucide-react";
import { useWeatherStore } from "@/lib/store";
import { formatTemperature, getWeatherMoodFromData } from "@/lib/weather-utils";
import { useI18n } from "@/lib/i18n";
import type { SynopStation } from "@/types/imgw";
import { WeatherIcon } from "@/components/weather/weather-icon";
import { cn } from "@/lib/utils";

const featuredNames = ["Warszawa", "Kraków", "Gdańsk", "Wrocław", "Poznań", "Zakopane"];

export function FeaturedStationsSection({ stations }: { stations: SynopStation[] }) {
  const { language, t } = useI18n();
  const selectedStationId = useWeatherStore((state) => state.selectedStationId);
  const selectStation = useWeatherStore((state) => state.selectStation);
  const featured = featuredNames.flatMap((name) => stations.find((station) => station.name === name) ?? []);
  return (
    <section className="space-y-3">
      <div>
        <p className="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.16em] text-sky-700 dark:text-sky-300"><MapPinned className="size-4" />{t("featured.label")}</p>
        <h2 className="mt-2 text-xl font-semibold tracking-tight">{t("featured.title")}</h2>
      </div>
      <div className="grid grid-cols-2 gap-2.5 sm:grid-cols-3 lg:grid-cols-6">
        {featured.map((station) => {
          const active = selectedStationId === station.id;
          return (
            <button
              type="button"
              key={station.id}
              onClick={() => selectStation(station.id)}
              className={cn("glass-subtle flex items-center justify-between gap-2 rounded-2xl p-3 text-left transition hover:-translate-y-0.5 hover:bg-white/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 dark:hover:bg-white/10", active && "border-sky-400/60 bg-white/60 dark:bg-white/15")}
            >
              <span className="min-w-0">
                <span className="block truncate text-xs font-medium text-slate-600 dark:text-slate-300">{station.name}</span>
                <span className="mt-1 block text-xl font-semibold tracking-tight">{formatTemperature(station.temperature, language)}</span>
              </span>
              <WeatherIcon mood={getWeatherMoodFromData(station)} className="size-6 shrink-0 text-sky-600 dark:text-sky-300" />
            </button>
          );
        })}
      </div>
    </section>
  );
}