// D2 트렌딩 위젯 — "지금 뜨는 종목" (글수·언급량 랭킹). SSR 프레젠테이션.
// 서버 컴포넌트: rows prop 을 상위(page)에서 fetchTrendingStocks 로 주입.
import '@/app/styles/community.scss';
import Link from 'next/link';
import { TrendingUp } from 'lucide-react';
import { changeDirection, changeSymbol, formatNumber } from '@/lib/utils/stock';
import { TrendingStockRow } from '@/types/community';

interface Props {
	rows: TrendingStockRow[];
	limit?: number;
}

export default function TrendingStocks({ rows, limit = 10 }: Props)
{
	const list = rows.slice(0, limit);

	return (
		<div className='trending-widget'>
			<div className='trending-widget__title'>
				<TrendingUp size={16} strokeWidth={2} aria-hidden='true' />
				지금 뜨는 종목
			</div>

			{list.length === 0 ? (
				<p className='trending-widget__empty'>집계된 종목이 없습니다.</p>
			) : (
				<ul className='trending-widget__list'>
					{list.map(row => {
						const dir = changeDirection(row.changeRate);

						return (
							<li key={row.stockCode}>
								<Link href={`/stock/${row.stockCode}?tab=discussion`} className='trending-widget__item'>
									<span className='trending-widget__rank'>{row.rank}</span>
									<span className='trending-widget__name'>{row.stockName ?? row.stockCode}</span>
									{row.closePrice !== null && (
										<span className={`trending-widget__price stock-change stock-change--${dir}`}>
											<span aria-hidden='true'>{changeSymbol(dir)}</span> {formatNumber(row.closePrice)}
										</span>
									)}
									<span className='trending-widget__posts'>글 {row.posts.toLocaleString()}</span>
								</Link>
							</li>
						);
					})}
				</ul>
			)}
		</div>
	);
}