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

// 국내 증시 요약 — 코스피/코스닥/KOSPI200 카드. 지수값·전일비·등락률 + 등락종목수(코스피/코스닥만).
// (투자자별 순매수·베이시스는 미지원으로 제외)
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);
					const hasBreadth = row.advances !== null && row.advances !== undefined;
					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>

							{hasBreadth && (
								<div className='dsum__breadth'>
									<span className='dsum__b'>상한 <em className='dsum__b--up'>{formatCount(row.limitUp)}</em></span>
									<span className='dsum__b'>상승 <em className='dsum__b--up'>{formatCount(row.advances)}</em></span>
									<span className='dsum__b'>보합 <em>{formatCount(row.unchanged)}</em></span>
									<span className='dsum__b'>하락 <em className='dsum__b--down'>{formatCount(row.declines)}</em></span>
									<span className='dsum__b'>하한 <em className='dsum__b--down'>{formatCount(row.limitDown)}</em></span>
								</div>
							)}
						</div>
					);
				})}
			</div>
		</section>
	);
}