'use client';

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

type Props = {
	form: FormState;
};

export default function GoalPreviewPanel({ form }: Props) {
	const percent = form.targetAmount > 0 ? Math.min((form.startAmount / form.targetAmount) * 100, 100) : 0;

	return (
		<aside className="goal-config__preview-panel">
			<div className="goal-config__widget">
				<div className="goal-config__widget-label">미리보기</div>
				<div className="goal-config__widget-body">
					<div className="goal-preview">
						<div
							className="goal-preview__title"
							style={{ fontFamily: form.titleFontFamily || 'inherit', fontSize: `${form.titleFontSizePx}px`, color: form.titleFontColor }}
						>
							{form.title || '후원 목표'}
						</div>
						<div className="goal-preview__bar-wrap" style={{ minHeight: `${form.barHeightPx}px`, height: `${form.barHeightPx}px`, background: form.barBackgroundColor }}>
							<div
								className="goal-preview__bar-fill"
								style={{
									width: `${percent}%`,
									background: form.barColor,
									height: '100%'
								}}
							/>
							<div
								className="goal-preview__amount"
								style={{ fontFamily: form.amountFontFamily || 'inherit', fontSize: `${form.amountFontSizePx}px`, color: form.amountFontColor }}
							>
								{form.startAmount.toLocaleString()}원 / {form.targetAmount.toLocaleString()}원
								{form.isShowPercent && (
									<span className="goal-preview__percent">
										{' '}({Math.round(percent)}%)
									</span>
								)}
							</div>
						</div>
					</div>
				</div>
			</div>
		</aside>
	);
}