dpot-frontend/app/studio/donation/rank/_components/RankPreviewPanel.tsx

'use client';

import type { FormState } from '../types';
import { MOCK_RANKING } from '../constants';

type Props = {
	form: FormState;
};

/** 순위별 폰트 스타일 반환 (1~3등은 커스텀, 나머지는 기본) */
const getRankStyle = (rank: number, form: FormState): React.CSSProperties => {
	if (rank === 1) {
		return {
			fontFamily: form.rank1FontFamily || undefined,
			fontSize: `${form.rank1FontSizePx}px`,
			color: form.rank1FontColor
		};
	}
	if (rank === 2) {
		return {
			fontFamily: form.rank2FontFamily || undefined,
			fontSize: `${form.rank2FontSizePx}px`,
			color: form.rank2FontColor
		};
	}
	if (rank === 3) {
		return {
			fontFamily: form.rank3FontFamily || undefined,
			fontSize: `${form.rank3FontSizePx}px`,
			color: form.rank3FontColor
		};
	}
	return {};
};

export default function RankPreviewPanel({ form }: Props) {
	const visibleRanking = MOCK_RANKING.slice(0, form.maxRankCount);

	const titleStyle: React.CSSProperties = {
		fontFamily: form.titleFontFamily || undefined,
		fontSize: `${form.titleFontSizePx}px`,
		color: form.titleFontColor
	};

	return (
		<aside className="rank-config__preview-panel">
			<div className="rank-config__widget">
				<div className="rank-config__widget-label">미리보기</div>
				<div className={`rank-config__widget-body rank-config__widget-body--${['basic', 'dark', 'minimal'][form.theme] ?? 'basic'}`}>
					<div className="rank-preview">
						<div className="rank-preview__title" style={titleStyle}>
							{form.title || '후원 순위'}
						</div>
						<div className="rank-preview__list">
							{visibleRanking.map(item => {
								const badgeClass = item.rank <= 3 ? `rank-preview__badge--${item.rank}` : 'rank-preview__badge--default';
								const nameStyle = getRankStyle(item.rank, form);
								return (
									<div key={item.rank} className={`rank-preview__item rank-preview__item--${item.rank}`}>
										<div className={`rank-preview__badge ${badgeClass}`}>{item.rank}</div>
										{form.isShowMemberIcon && (
											<div className="rank-preview__member-icon" />
										)}
										{form.isShowGradeIcon && (
											<div className="rank-preview__grade-icon" />
										)}
										<div className="rank-preview__name" style={nameStyle}>
											{item.sponsorName}
										</div>
										<div className="rank-preview__meta">
											{form.isShowAmount && (
												<span className="rank-preview__amount" style={nameStyle}>
													{item.totalAmount.toLocaleString()}원
												</span>
											)}
											{form.isShowDonationCount && (
												<span className="rank-preview__count">
													{item.donationCount}회
												</span>
											)}
										</div>
									</div>
								);
							})}
							{visibleRanking.length === 0 && (
								<div className="rank-preview__empty">순위 데이터 없음</div>
							)}
						</div>
					</div>
				</div>
			</div>
		</aside>
	);
}