import { getServerT, getServerLocale } from "@/lib/i18n/server";
import { ChannelActions } from "./ChannelActions";

interface ChannelHeaderProps {
  locale: string;
}

export async function ChannelHeader({ locale }: ChannelHeaderProps) {
  const t = await getServerT(locale, "channel");

  return (
    <header className="ch-header">
      <div className="wrap ch-header-row">
        <div className="ch-logo">
          N
          <span className="live-dot" />
        </div>

        <div className="ch-info">
          <h1 className="ch-name">
            NDTV 24×7{" "}
            <span className="verified" title={t("verified_title")}>
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="3"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="M5 12l5 5L20 7" />
              </svg>
            </span>
          </h1>
          <div className="ch-handle">
            @ndtv247 · English news · India · since 1988
          </div>
          <p className="ch-tagline">
            India&apos;s most watched English news channel. Reporting in real
            time from 14 bureaus — politics, business, sport, culture and the
            long-arc stories nobody else has time for.
          </p>
          <div className="ch-meta">
            <span className="item">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <circle cx="12" cy="12" r="9" />
                <path d="M12 7v5l3 2" />
              </svg>
              {t("meta_on_air")} <b>24/7</b>
            </span>
            <span className="item">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <rect x="2" y="5" width="20" height="14" rx="2" />
              </svg>
              HD · 1080p
            </span>
            <span className="item">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M21 10c0 7-9 13-9 13S3 17 3 10a9 9 0 0 1 18 0z" />
                <circle cx="12" cy="10" r="3" />
              </svg>
              <b>{t("meta_hq")}</b>
            </span>
            <span className="item">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <circle cx="12" cy="12" r="9" />
                <path d="M2 12h20M12 2a14 14 0 0 1 0 20M12 2a14 14 0 0 0 0 20" />
              </svg>
              English
            </span>
          </div>
        </div>

        <ChannelActions />
      </div>

      <div className="wrap">
        <div className="ch-stats">
          <div className="ch-stat">
            <span className="n">8.4M</span>
            <span className="l">{t("stat_followers")}</span>
          </div>
          <div className="ch-stat">
            <span className="n">24,318</span>
            <span className="l">{t("stat_watching")}</span>
          </div>
          <div className="ch-stat">
            <span className="n">142</span>
            <span className="l">{t("stat_shows")}</span>
          </div>
          <div className="ch-stat">
            <span className="n">38</span>
            <span className="l">{t("stat_anchors")}</span>
          </div>
          <div className="ch-stat">
            <span className="n">37</span>
            <span className="l">{t("stat_years")}</span>
          </div>
        </div>
      </div>
    </header>
  );
}