import Link from 'next/link';
import { BadgeCheck } from 'lucide-react';
import { fetchSuggestedFollows } from '@/lib/api/feed/post';
import FollowButton from '@/app/component/FollowButton';
import { Avatar, AvatarImage, AvatarFallback } from '@/components/ui/avatar';

export default async function FeedSuggestedFollows()
{
	const res = await fetchSuggestedFollows(5);
	const list = res.data?.list ?? [];

	if (list.length === 0) {
		return null;
	}

	return (
		<section className="feed__sidebar-section">
			<h2 className="feed__sidebar-title">추천 회원</h2>
			<ul className="feed__sidebar-follows">
				{list.map((member) => {
					const display = member.name || member.sid;
					return (
						<li key={member.sid} className="feed__sidebar-follow">
							<Link href={`/user/${member.sid}`} aria-label={`${display} 프로필`}>
								<Avatar className="feed__sidebar-follow-avatar">
									<AvatarImage src={member.thumb || undefined} alt={display} />
									<AvatarFallback className="feed__sidebar-follow-avatar-fallback">
										<img src="/icons/layout/avatar.svg" alt={display} />
									</AvatarFallback>
								</Avatar>
							</Link>
							<div className="feed__sidebar-follow-meta">
								<Link href={`/user/${member.sid}`} className="feed__sidebar-follow-name">
									{display}
									{member.isCreator && (
										<span className="feed__sidebar-follow-badge" title="회원">
											<BadgeCheck size={12} fill="currentColor" stroke="#fff" strokeWidth={2.5} />
										</span>
									)}
								</Link>
								<p className="feed__sidebar-follow-followers">팔로워 {member.followerCount.toLocaleString()}명</p>
							</div>
							<FollowButton memberSID={member.sid} className="feed__sidebar-follow-btn" />
						</li>
					);
				})}
			</ul>
		</section>
	);
}