Profile Stat

1'use client';
2 
3import React from 'react';
4import { Users, User, BadgeDollarSign } from 'lucide-react';
5import type { LucideProps } from 'lucide-react';
6import { cn, formatCount, pluralize } from '@/lib/utils/deso';
7 
8type StatVariant = 'followers' | 'following' | 'subscribers';
9 
10export interface ProfileStatProps {
11  variant?: StatVariant;
12  count: number;
13  label?: string;
14  Icon?: React.FC<LucideProps>;
15  className?: string;
16  abbreviate?: boolean;
17  decimals?: number;
18}
19 
20const variantConfig = {
21  followers: {
22    label: 'Follower',
23    Icon: Users,
24  },
25  following: {
26    label: 'Following',
27    Icon: User,
28  },
29  subscribers: {
30    label: 'Subscriber',
31    Icon: BadgeDollarSign,
32  },
33} as const;
34 
35export function ProfileStat({
36  variant,
37  count,
38  label: labelOverride,
39  Icon: IconOverride,
40  className,
41  abbreviate = true,
42  decimals = 2,
43}: ProfileStatProps) {
44  const config = variant ? variantConfig[variant] : null;
45 
46  const Icon = IconOverride || (config ? config.Icon : null);
47  
48  let label = labelOverride;
49  if (!label && config) {
50    if (variant === 'following') {
51      label = config.label;
52    } else {
53      label = pluralize(count, config.label);
54    }
55  }
56 
57  return (
58    <div className={cn('flex items-center gap-1.5 text-sm text-foreground', className)}>
59      {Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
60      <span className="font-bold">{formatCount(count, abbreviate, decimals)}</span>
61      {label && <span className="text-muted-foreground">{label}</span>}
62    </div>
63  );
64}