dpot-frontend/app/studio/donation/crew/widget/_components/CrewWidgetPreviewPanel.tsx

'use client';

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

type Props = {
	form: FormState;
};

const THEME_NAMES = ['basic', 'dark', 'minimal'];

export default function CrewWidgetPreviewPanel({ form }: Props)
{
	const visibleItems = MOCK_CREW_RANKING.slice(0, form.maxDisplayCount);
	const themeName = THEME_NAMES[form.theme] ?? 'basic';

	const getFontStyle = (rank: number) => {
		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 {
			fontFamily: form.rowFontFamily || undefined,
			fontSize: `${form.rowFontSizePx}px`,
			color: form.rowFontColor
		};
	};

	const getBadgeClass = (rank: number) => {
		if (rank <= 3) {
			return `crew-widget-preview__badge--${rank}`;
		}
		return 'crew-widget-preview__badge--default';
	};

	return (
		<aside className="crew-widget-preview">
			<div className="crew-widget-preview__widget">
				<div className="crew-widget-preview__widget-label">미리보기</div>
				<div
					className={`crew-widget-preview__widget-body crew-widget-preview__widget-body--${themeName}`}
					style={{ backgroundColor: form.bgColor }}
				>
					{/* 위젯 제목 */}
					<div className="crew-widget-preview__title" style={{
						fontFamily: form.titleFontFamily || undefined,
						fontSize: `${form.titleFontSizePx}px`,
						color: form.titleFontColor
					}}>
						{form.title || '크루 순위'}
					</div>

					{/* 컬럼 헤더 */}
					<div className="crew-widget-preview__columns">
						<span className="crew-widget-preview__col-rank">순위</span>
						{form.isShowMemberIcon && <span className="crew-widget-preview__col-icon" />}
						<span className="crew-widget-preview__col-name">이름</span>
						{form.isShowContributionRate && <span className="crew-widget-preview__col-rate">기여도</span>}
						{form.isShowAmount && <span className="crew-widget-preview__col-amount">후원 점수</span>}
						{form.isShowDonationCount && <span className="crew-widget-preview__col-count">건수</span>}
					</div>

					{/* 순위 리스트 */}
					<div className="crew-widget-preview__list">
						{visibleItems.map(item => {
							const style = getFontStyle(item.rank);
							return (
								<div
									key={item.rank}
									className={`crew-widget-preview__item${item.rank <= 3 ? ` crew-widget-preview__item--${item.rank}` : ''}`}
									style={style}
								>
									<span className={`crew-widget-preview__badge ${getBadgeClass(item.rank)}`}>
										{item.rank}
									</span>
									{form.isShowMemberIcon && <span className="crew-widget-preview__member-icon" />}
									<span className="crew-widget-preview__name">{item.nickname}</span>
									{form.isShowContributionRate && (
										<span className="crew-widget-preview__rate">{item.contributionRate.toFixed(1)}%</span>
									)}
									{form.isShowAmount && (
										<span className="crew-widget-preview__amount">{item.totalAmount.toLocaleString()}원</span>
									)}
									{form.isShowDonationCount && (
										<span className="crew-widget-preview__count">{item.donationCount}건</span>
									)}
								</div>
							);
						})}
					</div>
				</div>
			</div>
		</aside>
	);
}