ANTOOZA-FRONTEND/app/(main)/creators/CreatorCard.tsx

import Link from 'next/link';
import Image from 'next/image';
import type { CreatorItem } from '@/types/response/channel/creators';
import { buildChannelUrl, formatHandle, formatCount } from '@/lib/utils/channel';

export default function CreatorCard({ creator }: { creator: CreatorItem })
{
	const href = buildChannelUrl({ handle: creator.handle, channelSID: creator.channelSID });

	return (
		<Link
			href={href}
			className="flex items-center gap-3 rounded-xl border border-[var(--border-default)] bg-[var(--bg-elevated)] p-3 transition hover:shadow-md"
		>
			<div className="relative shrink-0">
				<div className="relative size-16 overflow-hidden rounded-full bg-[var(--bg-elevated)]">
					{creator.thumbnailUrl ? (
						<Image src={creator.thumbnailUrl} alt="" fill unoptimized sizes="64px" className="object-cover" />
					) : (
						<span className="flex size-full items-center justify-center text-2xl font-bold text-[var(--text-secondary)]">
							{creator.name.charAt(0).toUpperCase()}
						</span>
					)}
				</div>
				{creator.isLive && (
					<span className="absolute -bottom-1 left-1/2 -translate-x-1/2 rounded-full bg-red-600 px-2 py-0.5 text-[10px] font-bold leading-none text-white">
						LIVE
					</span>
				)}
			</div>

			<div className="flex min-w-0 flex-1 flex-col gap-0.5">
				<div className="flex items-center gap-1.5">
					<h3 className="line-clamp-1 font-semibold">{creator.name}</h3>
					{creator.gradeName && (
						<span
							className="inline-flex shrink-0 items-center gap-1 rounded-full border border-[var(--border-default)] px-1.5 py-0.5 text-[10px] font-semibold"
							style={creator.gradeColor ? { color: creator.gradeColor } : undefined}
						>
							{creator.gradeImage && (
								<Image src={creator.gradeImage} alt="" width={12} height={12} unoptimized className="inline-block" />
							)}
							{creator.gradeName}
						</span>
					)}
				</div>

				{creator.handle && (
					<div className="line-clamp-1 text-xs text-[var(--text-secondary)]">{formatHandle(creator.handle)}</div>
				)}

				<div className="mt-0.5 flex flex-wrap gap-x-3 text-xs text-[var(--text-secondary)]">
					<span>구독 {formatCount(creator.subscriberCount)}</span>
					<span>팔로워 {formatCount(creator.followerCount)}</span>
				</div>
			</div>
		</Link>
	);
}