ANTOOZA-FRONTEND/app/(main)/ranking/_components/MyRankBar.tsx

'use client';

import { User } from 'lucide-react';
import type { MyRankInfo, RankingType } from '@/types/response/ranking';

interface Props {
	info: MyRankInfo;
	type: RankingType;
}

function formatAmount(amount: number): string {
	if (amount >= 100000000) {
		return `${(amount / 100000000).toFixed(1)}억`;
	}

	if (amount >= 10000) {
		return `${(amount / 10000).toFixed(1)}만`;
	}

	return amount.toLocaleString('ko-KR');
}

export default function MyRankBar({ info, type }: Props) {
	const suffix = type === 'donor' ? 'P' : '원';
	return (
		<aside className="ranking__my-bar" role="status">
			<div className="ranking__my-bar-icon">
				<User size={18} />
			</div>
			<div className="ranking__my-bar-text">
				<strong>내 순위</strong>
				<span>{info.rank}위</span>
				{info.rankChange !== null && info.rankChange !== 0 ? (
					<em className={info.rankChange > 0 ? 'ranking__my-bar-up' : 'ranking__my-bar-down'}>
						{info.rankChange > 0 ? `▲${info.rankChange}` : `▼${Math.abs(info.rankChange)}`}
					</em>
				) : null}
			</div>
			<div className="ranking__my-bar-amount">{formatAmount(info.moneyAmount)}{suffix}</div>
		</aside>
	);
}