"use client";

import { ExternalLink } from "lucide-react";
import { useI18n } from "@/lib/i18n";
import type { ForecastSource } from "@/types/forecast";

export function ForecastSources({ sources }: { sources: ForecastSource[] }) {
  const { t } = useI18n();
  const hasImgw = sources.includes("imgw-alaro");

  return (
    <p className="text-[0.68rem] leading-5 text-slate-500 dark:text-slate-400">
      {t("forecast.source")}{" "}
      {hasImgw && (
        <>
          <a href="https://meteo.imgw.pl/pogoda/" target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 underline decoration-slate-400/60 underline-offset-2 transition hover:text-sky-700 dark:hover:text-sky-300">
            IMGW ALARO <ExternalLink className="size-3" />
          </a>
          {", "}
        </>
      )}
      <a href="https://open-meteo.com/" target="_blank" rel="noreferrer" className="inline-flex items-center gap-1 underline decoration-slate-400/60 underline-offset-2 transition hover:text-sky-700 dark:hover:text-sky-300">
        Open-Meteo <ExternalLink className="size-3" />
      </a>
      . {t(hasImgw ? "forecast.sourceCombinedDescription" : "forecast.sourceFallbackDescription")}
    </p>
  );
}