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

interface ChannelCoverProps {
  locale: string;
}

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

  return (
    /* eslint-disable-next-line @next/next/no-img-element */
    <div className="ch-cover">
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        src="https://images.unsplash.com/photo-1495020689067-958852a7765e?w=2000&q=80"
        alt=""
      />
      <span className="live-bar">{t("live_bar")}</span>
      <span className="watching">
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
        >
          <circle cx="12" cy="12" r="3" />
          <path d="M2 12s4-8 10-8 10 8 10 8-4 8-10 8S2 12 2 12z" />
        </svg>
        24,318 {t("watching")}
      </span>
      <button className="play-now" type="button" aria-label="Play live stream">
        <svg viewBox="0 0 24 24">
          <polygon points="6 4 20 12 6 20" />
        </svg>
      </button>
    </div>
  );
}