"use client";

import Link from "next/link";
import type { BroadcastInfo } from "@/types/broadcast";
import HotIndicator from "@/components/ui/HotIndicator";
import styles from "./styles/BroadcastCard.module.scss";

interface BroadcastCardProps {
    broadcast: BroadcastInfo;
    variant?: "carousel" | "grid";
}

export default function BroadcastCard({ broadcast, variant = "grid" }: BroadcastCardProps) {
    const cardClass = variant === "carousel" ? styles["carousel-card"] : styles["video-card"];
    const thumbnailClass =
        variant === "carousel" ? styles["carousel-thumbnail"] : styles["video-thumbnail"];
    const infoClass = variant === "carousel" ? styles["carousel-info"] : styles["video-info"];
    const titleClass = variant === "carousel" ? styles["carousel-title"] : styles["video-title"];
    const channelClass =
        variant === "carousel" ? styles["carousel-channel"] : styles["video-channel"];

    return (
        <Link href={`/live/${broadcast.id}`} className={cardClass}>
            <div className={thumbnailClass}>
                <div className={styles["placeholder-thumbnail"]}>{broadcast.title}</div>
                <div className={styles["live-indicator"]}>🔴 LIVE</div>
                {variant === "carousel" && (
                    <>
                        <div className={styles["viewer-count"]}>
                            👥 {broadcast.viewerCount.toLocaleString()}
                        </div>
                        {/* <div className={styles['hot-indicator']}>
              <HotIndicator />
            </div> */}
                    </>
                )}
            </div>

            <div className={infoClass}>
                <h3 className={titleClass}>{broadcast.title}</h3>
                {variant === "carousel" ? (
                    <p className={channelClass}>{broadcast.channel}</p>
                ) : (
                    <div className={styles["video-meta"]}>
                        <div className={channelClass}>{broadcast.channel}</div>
                        <div className={styles["video-stats"]}>
                            <span className={styles["viewers"]}>
                                👥 {broadcast.viewerCount.toLocaleString()}명 시청중
                            </span>
                            <span className={styles["category"]}>#{broadcast.category}</span>
                            <span className={styles["live-status"]}>방송 중</span>
                        </div>
                    </div>
                )}
            </div>
        </Link>
    );
}