ANTOOZA-FRONTEND/app/(main)/_components/Sparkline.tsx

'use client';

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

// 미니 스파크라인 — 최근 종가 시계열(과거→최신)을 방향색(상승 적/하락 청)으로 표시.
// 색은 래퍼의 dir 클래스(.spark--up/down/flat)가 지정하는 CSS color 를 currentColor 로 상속받는다.
// (recharts stroke/fill 은 SVG presentation attribute 로 렌더돼 var() 가 해석되지 않으므로 currentColor 사용.)
// 축·툴팁·점 없음. 부모 슬롯의 고정 크기를 100% 채운다(카드/그리드 셀 공용). 데이터 2개 미만이면 빈 placeholder.
type Props = {
	data: number[];
	dir: MoveDir;
};

export default function Sparkline({ data, dir }: Props)
{
	if (!data || data.length < 2) {
		return <div className='spark spark--empty' aria-hidden='true' />;
	}

	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>
	);
}