// 미니 막대 스파크라인 — 시계열 값 배열을 최대값 대비 비율 높이 막대로 표시 (RSC, 순수 표시).
// 차트 라이브러리 없이 SCSS(.market__spark) 만으로 렌더. null 은 0 높이.

interface Props {
	values: (number|null)[];
	label?: string;
}

export default function Sparkline({ values, label }: Props)
{
	const nums = values.map(v => (v === null || v === undefined ? 0 : v));
	const max = Math.max(...nums, 0);

	if (nums.length === 0 || max === 0) {
		return <div className='market__spark-empty'>추이 데이터 없음</div>;
	}

	return (
		<div className='market__spark' role='img' aria-label={label ?? '값 추이'}>
			{nums.map((v, index) => {
				const height = Math.max((v / max) * 100, v > 0 ? 4 : 0);

				return (
					<span
						key={index}
						className='market__spark-bar'
						style={{ height: `${height}%` }}
					/>
				);
			})}
		</div>
	);
}