'use client';
import { Flame, Zap } from 'lucide-react';
import type { ForumPost } from '@/types/forum';
interface EngagementBadgesProps {
post: ForumPost;
showLabels?: boolean;
}
/**
* EngagementBadges - Visual indicators for discussion engagement
*
* Badges:
* - Active (replied to in last hour)
* - Heated Debate (high controversial score)
* - New (posted in last 24h)
* - Unanswered (no replies)
*/
export function EngagementBadges({ post, showLabels = true }: EngagementBadgesProps) {
const badges: Array<{
icon: React.ReactNode;
label: string;
color: string;
bgColor: string;
show: boolean;
}> = [];
// Calculate time differences
const now = new Date();
const lastReplyAt = new Date(post.last_reply_at);
const minutesSinceLastReply = (now.getTime() - lastReplyAt.getTime()) / (1000 * 60);
// Active badge - replied to in last hour
if (post.reply_count > 0 && minutesSinceLastReply < 60) {
badges.push({
icon: <Zap size={14} />,
label: 'Active',
color: 'text-yellow-500',
bgColor: 'bg-yellow-500/20',
show: true,
});
}
// Heated debate - high controversy score
const controversyScore = Math.min(post.upvotes_count, post.downvotes_count);
if (controversyScore >= 5 && post.reply_count >= 10) {
badges.push({
icon: <Flame size={14} />,
label: 'Heated',
color: 'text-orange-500',
bgColor: 'bg-orange-500/20',
show: true,
});
}
if (badges.filter((b) => b.show).length === 0) {
return null;
}
return (
<div className="flex items-center gap-2 flex-wrap">
{badges
.filter((b) => b.show)
.map((badge, index) => (
<span
key={index}
className={`
flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium
${badge.color} ${badge.bgColor}
`}
>
{badge.icon}
{showLabels && <span>{badge.label}</span>}
</span>
))}
</div>
);
}
/**
* NewRepliesBadge - Shows count of new replies since last visit
* Note: Requires implementing user visit tracking
*/
export function NewRepliesBadge({ count }: { count: number }) {
if (count === 0) return null;
return (
<span className="inline-flex items-center justify-center px-2 py-1 text-xs font-bold text-white bg-accent-red rounded-full">
{count} new
</span>
);
}
