'use client';

import { Area, AreaChart, ResponsiveContainer, YAxis } from 'recharts';
import type { MoveDir } from '@/types/worldIndex';

// recharts(d3 포함) 실제 렌더 본체 — Sparkline 이 next/dynamic({ssr:false})로 지연 로드.
// 색은 래퍼의 dir 클래스(.spark--up/down/flat)가 지정하는 CSS color 를 currentColor 로 상속.
// 호출부에서 data.length>=2 보장.
type Props = {
	data: number[];
	dir: MoveDir;
};

export default function SparklineInner({ data, dir }: Props)
{
	const chartData = data.map((v, i) => ({ i, v }));

	return (
		<div className={`spark spark--${dir}`} aria-hidden='true'>
			<ResponsiveContainer width='100%' height='100%'>
				<AreaChart data={chartData} margin={{ top: 2, right: 0, bottom: 2, left: 0 }}>
					<YAxis hide domain={['dataMin', 'dataMax']} />
					<Area
						type='monotone'
						dataKey='v'
						stroke='currentColor'
						strokeWidth={1.5}
						fill='currentColor'
						fillOpacity={0.12}
						dot={false}
						isAnimationActive={false}
					/>
				</AreaChart>
			</ResponsiveContainer>
		</div>
	);
}