ANTOOZA-FRONTEND/app/(main)/_components/LiveChannelCard.tsx

'use client';

import Link from 'next/link';
import Image from 'next/image';
import { Radio, Eye } from 'lucide-react';
import type { LiveChannelItem } from '@/types/response/channel/live-list';
import { buildWatchUrl, formatHandle, formatCount } from '@/lib/utils/channel';

type Props = {
	channel: LiveChannelItem;
	priority?: boolean;
};

export default function LiveChannelCard({ channel, priority = false }: Props)
{
	const href = buildWatchUrl({ handle: channel.handle, channelSID: channel.channelSID });
	const viewerLabel = formatCount(channel.viewerCount);

	return (
		<Link
			href={href}
			className="live-card"
			aria-label={`${channel.channelName} 라이브 — ${channel.liveTitle} · 시청자 ${viewerLabel}`}
		>
			<div className="live-card__thumb-wrap">
				<Image
					src={channel.videoThumbnailUrl}
					alt=""
					fill
					unoptimized
					priority={priority}
					sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, (max-width: 1536px) 33vw, 20vw"
					className="live-card__thumb"
				/>
				<span className="live-card__badge" aria-label="라이브 방송 중">
					<Radio className="size-3" aria-hidden="true" />
					LIVE
				</span>
				<span className="live-card__viewers" aria-hidden="true">
					<Eye className="size-3" />
					{viewerLabel}
				</span>
			</div>

			<div className="live-card__meta">
				<div className="live-card__avatar">
					{channel.channelThumbnailUrl ? (
						<Image
							src={channel.channelThumbnailUrl}
							alt=""
							width={36}
							height={36}
							unoptimized
							className="live-card__avatar-img"
						/>
					) : (
						<span className="live-card__avatar-fallback" aria-hidden="true">
							{channel.channelName.charAt(0).toUpperCase()}
						</span>
					)}
				</div>
				<div className="live-card__text">
					<h3 className="live-card__title">{channel.liveTitle || '라이브 방송 중'}</h3>
					<div className="live-card__channel-name">{channel.channelName}</div>
					{channel.handle && (
						<div className="live-card__handle">{formatHandle(channel.handle)}</div>
					)}
				</div>
			</div>
		</Link>
	);
}