ANTOOZA-FRONTEND/components/table/PriceChange.tsx

'use client';

// D6 §5.1 — 등락 표시: 색(--price-*) + 부호 기호(▲▼—) 병행 (색맹 대응).
// 등락에 포인트 컬러(--az-accent) 사용 금지.
import { changeDirection, changeSymbol, formatChangeRate } from '@/lib/utils/stock';

interface Props {
	rate: number|null|undefined;
	// true 면 등락률(%) 대신 등락액(원)도 표기 가능 — 여기선 rate 만 다룸
	showSign?: boolean;
	className?: string;
}

export default function PriceChange({ rate, className }: Props)
{
	const direction = changeDirection(rate);

	return (
		<span className={`price-change price-change--${direction}${className ? ` ${className}` : ''}`}>
			<span className='price-change__symbol' aria-hidden='true'>{changeSymbol(direction)}</span>
			<span className='price-change__value'>{formatChangeRate(rate)}</span>
		</span>
	);
}