import { getServerT, getServerLocale } from "@/lib/i18n/server";
import type { CategoryMeta } from "../types/category.types";

interface CategoryHeroProps {
  meta: CategoryMeta;
  locale: string;
}

export default async function CategoryHero({ meta }: CategoryHeroProps) {
  const locale = await getServerLocale();
  const t = await getServerT(locale, "category");

  return (
    <header className="cat-hero">
      <div className="wrap cat-hero-row">
        <div>
          <nav className="cat-crumbs">
            <a href="/">{t("breadcrumb_home")}</a>
            <span className="sep">›</span>
            <span>{meta.name}</span>
          </nav>
          <h1 className="cat-h1">{meta.name}</h1>
          <p className="cat-desc">{meta.description}</p>
          <div className="cat-stats">
            <span className="cat-badge">
              <span className="dot" />
              {meta.articleCount} {t("articles")}
            </span>
            {meta.liveCount > 0 && (
              <span className="cat-meta-mini">
                <span className="live">
                  {meta.liveCount} {t("live_now")}
                </span>
              </span>
            )}
            <span className="cat-meta-mini">· {t("updated_continuously")}</span>
          </div>
        </div>
        <div className="cat-hero-img">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img src={meta.image} alt={meta.name} />
          <div className="last">
            {t("last_updated")} · <b>20 May 2026, 09:48 IST</b>
          </div>
        </div>
      </div>
    </header>
  );
}