"use client";

import type { FC } from "react";
import Link from "next/link";
import { useAppSelector } from "@/store/hooks";
import { selectNewsroom } from "@/store/slices/newsroomSlice";
import { ROUTES } from "@/lib/routes";

export const ARCHIVE_YEARS = [2026, 2025, 2024] as const;

interface NewsroomArchivesProps {
  years?: (number | string)[];
}

export const NewsroomArchives: FC<NewsroomArchivesProps> = ({ years }) => {
  const reduxArchiveYears = useAppSelector(selectNewsroom)?.archiveYears;

  const yearsList =
    years && years.length > 0
      ? years
      : reduxArchiveYears && reduxArchiveYears.length > 0
      ? reduxArchiveYears
      : ARCHIVE_YEARS;

  return (
    <section
      aria-labelledby="newsroom-archives-heading"
      className="mt-10 w-full border-t border-[#e5e7eb] pt-8 sm:mt-14 sm:pt-10"
    >
      {/* Title with Blue Square Icon */}
      <div className="mb-2 flex items-center gap-2.5">
        <span
          className="inline-block size-3.5 shrink-0 rounded-[1px] bg-[#0088cc] sm:size-4"
          aria-hidden="true"
        />
        <h2
          id="newsroom-archives-heading"
          className="text-lg font-bold tracking-tight text-[#0d2440] uppercase sm:text-xl"
        >
          ARCHIVES
        </h2>
      </div>

      {/* Description */}
      <p className="mb-4 text-xs font-normal text-gray-700 sm:text-sm">
        Browse the archives of all articles, live events and announcements on SPP Newsroom since 2025
      </p>

      {/* Year Tags (Redirect to /archives?yr=year) */}
      <div className="flex items-center gap-2.5">
        {yearsList.map((year) => (
          <Link
            key={String(year)}
            href={ROUTES.archives(year)}
            aria-label={`Archive year ${year}`}
            className="inline-flex items-center justify-center rounded-[3px] border border-gray-400/80 bg-white px-3 py-1 text-xs font-medium text-gray-800 shadow-[0_1px_2px_rgba(0,0,0,0.03)] transition-colors hover:border-accent hover:text-accent hover:bg-slate-50 sm:text-xs"
          >
            {year}
          </Link>
        ))}
      </div>
    </section>
  );
};