"use client";

import Link from "next/link";
import { formatNewsroomDate } from "@/lib/formatDate";
import { ROUTES } from "@/lib/routes";
import { CategoryIcon } from "@/components/ui/Icons";
import type { NewsroomItem } from "@/types/newsroom";

interface NewsroomCardProps {
  article: NewsroomItem;
}

export function NewsroomCard({ article }: NewsroomCardProps) {
  const articleLink = article.sl
    ? ROUTES.newsroomArticle(article.sl)
    : ROUTES.newsroomArticle(article._id);

  const formattedDate = formatNewsroomDate(article.d?.toString() || article.createdAt?.toString());
  const authorOrCategory = article.cat_name || article.author || "Sterling Insights";

  return (
    <article className="group flex h-full flex-col overflow-hidden  border border-gray-100 bg-white  transition-all duration-300 hover:-translate-y-1 hover:border-gray-200 hover:shadow-[0_14px_30px_rgba(0,0,0,0.09)]">
      {/* Top Banner Image */}
      <Link
        href={articleLink}
        className="relative block aspect-[16/10] w-full overflow-hidden bg-gray-100"
      >
        {article.bi ? (
          /* eslint-disable-next-line @next/next/no-img-element */
          <img
            src={article.bi}
            alt={article.t}
            className="h-full w-full object-cover transition-transform duration-500 ease-out group-hover:scale-105"
            loading="lazy"
          />
        ) : (
          <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-gray-100 to-gray-200 text-gray-400">
            <svg
              className="h-10 w-10 text-gray-300"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
              aria-hidden="true"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth="1.5"
                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
              />
            </svg>
          </div>
        )}
      </Link>

      {/* Card Content */}
      <div className="flex flex-1 flex-col p-5 sm:p-6">
        {/* Title */}
        <h3 className="mb-3 text-[1.125rem] font-bold leading-snug tracking-tight text-[#111827] sm:text-[1.2rem]">
          <Link
            href={articleLink}
            className="line-clamp-2 transition-colors duration-200 group-hover:text-accent text-[#2e5e99]"
          >
            {article.t}
          </Link>
        </h3>

        {/* Meta Info (Author/Category and Created Date) */}
        <div className="mb-3 flex flex-wrap items-center gap-y-1 gap-x-4 text-[0.8125rem] text-gray-500">
          {/* Category */}
          {/* <div className="flex items-center gap-1.5">
            <CategoryIcon className="h-3.5 w-3.5 shrink-0 text-gray-400" />
            <span className="font-medium text-gray-600 line-clamp-1">{authorOrCategory}</span>
          </div> */}

          {/* Date */}
          {formattedDate && (
            <div className="flex items-center gap-1.5">
              <svg
                className="h-4 w-4 shrink-0 text-gray-400"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                aria-hidden="true"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth="1.8"
                  d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
                />
              </svg>
              <span>{formattedDate}</span>
            </div>
          )}
        </div>

        {/* Subtitle / Description */}
        {article.st && (
          <p className="mt-auto line-clamp-3 text-[0.875rem] leading-relaxed text-gray-500">
            {article.st}
          </p>
        )}
      </div>
    </article>
  );
}