'use client';

// D2 예측 배지 — 방향(▲▼) + 기간 + 상태(진행중/적중/실패/무효) 색상.
// prediction prop 을 직접 받는 프레젠테이션 컴포넌트 (fetch 는 상위 서버 컴포넌트가 담당).
import '@/app/styles/community.scss';
import { PostPredictionResponse, DIRECTION_META, STATUS_META, HORIZON_LABEL, PredictionHorizonValue } from '@/types/community';

interface Props {
	prediction: PostPredictionResponse;
	// detail: 상세 뷰용 큰 배지 / 기본: 목록용 작은 배지
	variant?: 'detail'|'inline';
	showTarget?: boolean;
}

export default function PredictionBadge({ prediction, variant = 'inline', showTarget = true }: Props)
{
	const dir = DIRECTION_META[prediction.direction] ?? { label: prediction.directionLabel, symbol: '—', dir: 'up' as const };
	const status = STATUS_META[prediction.status] ?? { label: prediction.statusLabel, tone: 'pending' as const };
	const horizonLabel = HORIZON_LABEL[prediction.horizonDays as PredictionHorizonValue] ?? `${prediction.horizonDays}영업일`;

	return (
		<span className={`prediction-badge prediction-badge--${status.tone}${variant === 'detail' ? ' prediction-badge--detail' : ''}`}>
			<span className={`prediction-badge__dir prediction-badge__dir--${dir.dir}`}>
				<span aria-hidden='true'>{dir.symbol}</span>
				{dir.label}
			</span>
			<span className='prediction-badge__horizon'>{horizonLabel}</span>
			{showTarget && prediction.targetPrice !== null && (
				<span className='prediction-badge__target'>목표 {prediction.targetPrice.toLocaleString('ko-KR')}</span>
			)}
			<span className='prediction-badge__status'>
				<span className='prediction-badge__dot' aria-hidden='true'></span>
				{status.label}
			</span>
		</span>
	);
}