import './domestic-summary.scss';
import { moveDir, formatFlucRate, formatIndexClose } from '@/types/worldIndex';
import { type DomesticIndexRow, formatIndexChange } from '@/types/domesticSummary';
import Sparkline from './Sparkline';

// 국내·글로벌 증시 요약 — 코스피/코스닥/KOSPI200 + S&P500/나스닥 카드.
// 지수값·전일비·등락률 + 카드 하단 스파크라인. 등락색 --price-up/down(상승 적/하락 청).
type Props = {
	rows: DomesticIndexRow[];
};

const ARROW = { up: '▲', down: '▼', flat: '–' } as const;

export default function DomesticSummary({ rows }: Props)
{
	if (rows.length === 0) {
		return null;
	}

	return (
		<section className='dsum' aria-label='국내·글로벌 증시 요약'>
			<div className='dsum__grid'>
				{rows.map((row) => {
					const dir = moveDir(row.flucRateBp);
					return (
						<div key={row.key} className='dsum__card'>
							<div className='dsum__name'>{row.name}</div>

							<div className='dsum__price'>
								<span className={`dsum__value dsum__value--${dir}`}>{formatIndexClose(row.close)}</span>
								<span className={`dsum__chg dsum__chg--${dir}`}>
									<i className='dsum__arrow' aria-hidden='true'>{ARROW[dir]}</i>
									{formatIndexChange(row.changeVal)}
									<em className='dsum__rate'>{formatFlucRate(row.flucRateBp)}</em>
								</span>
							</div>

							<div className='dsum__spark'>
								<Sparkline data={row.spark} dir={dir} />
							</div>
						</div>
					);
				})}
			</div>
		</section>
	);
}