"use client";

import type { SynopStation } from "@/types/imgw";
import { StationCard } from "@/components/weather/station-card";
import { EmptyState } from "@/components/states/empty-state";
import { SearchX } from "lucide-react";
import { useI18n } from "@/lib/i18n";

export function StationGrid({ stations }: { stations: SynopStation[] }) {
  const { t } = useI18n();
  if (!stations.length) return <EmptyState icon={SearchX} title={t("stations.emptyTitle")} description={t("stations.emptyDescription")} />;
  return <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">{stations.map((station, index) => <StationCard key={station.id} station={station} index={index} />)}</div>;
}