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

interface CategorySidebarProps {
  categoryName: string;
  subcategories: Subcategory[];
  trending: TrendingItem[];
  breaking: BreakingItem[];
}

export default async function CategorySidebar({
  categoryName,
  subcategories,
  trending,
  breaking,
}: CategorySidebarProps) {
  const locale = await getServerLocale();
  const t = await getServerT(locale, "category");

  return (
    <aside className="cat-sidebar">
      {/* Trending */}
      <div className="cat-side-card cat-accent-left">
        <div className="cat-side-title">
          {t("sidebar.trending_in")} {categoryName}
        </div>
        <div className="cat-most-list">
          {trending.map((item) => (
            <a key={item.rank} className="cat-most-item" href="#">
              <div className="cat-rank">{item.rank}</div>
              <div>
                <h5>{item.title}</h5>
                <div className="cat-views">{item.reads}</div>
              </div>
            </a>
          ))}
        </div>
      </div>

      {/* Browse */}
      <div className="cat-side-card">
        <div className="cat-side-title muted">{t("sidebar.browse")} {categoryName}</div>
        <div className="cat-browse-list">
          {subcategories.map((sub, i) => (
            <a
              key={sub.slug}
              className={`cat-browse-item${i === 0 ? " active" : ""}`}
              href="#"
            >
              <span>{sub.slug === "all" ? `All ${categoryName}` : sub.label}</span>
              <span className="cat-cnt">{sub.count.toLocaleString()}</span>
              <span className="cat-arr">›</span>
            </a>
          ))}
        </div>
      </div>

      {/* Breaking */}
      <div className="cat-side-card cat-accent-top">
        <div className="cat-side-title">
          {t("sidebar.breaking")}
          <span className="cat-live-pill">
            <span className="dot" />
            LIVE
          </span>
        </div>
        <div className="cat-brk-list">
          {breaking.map((item, i) => (
            <div key={i} className="cat-brk-item">
              <span className="cat-brk-dot" />
              <div>
                <div className="cat-brk-text">{item.text}</div>
                <div className="cat-brk-time">{item.time}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Ad slot */}
      <div className="cat-ad-slot">
        <div className="cat-ad-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
            <rect x="3" y="3" width="18" height="18" rx="2" />
            <circle cx="9" cy="9" r="2" />
            <path d="m21 15-5-5L5 21" />
          </svg>
        </div>
        <div className="cat-ad-lbl">{t("sidebar.advertisement")}</div>
        <div className="cat-ad-size">240 × 300</div>
      </div>

      {/* Newsletter */}
      <div className="cat-side-card cat-accent-top">
        <div className="nl-h">{t("sidebar.newsletter.title")}</div>
        <p className="nl-p">{t("sidebar.newsletter.desc")}</p>
        <input
          className="nl-input"
          type="email"
          placeholder="your@email.com"
        />
        <button className="nl-btn">{t("sidebar.newsletter.cta")}</button>
        <div className="nl-note">{t("sidebar.newsletter.note")}</div>
      </div>
    </aside>
  );
}