import { Card } from '@/components/ui/card';
import { useCurrency } from '@/hooks/use-currency';
import { TTopInvestor } from '@/types/common/Investors-type';
import { getImageUrl } from '@/utils/getImageUrl';
import { maskName } from '@/utils/strHelpers';

export default function PodiumCard({
  investor,
  rank,
}: {
  investor: TTopInvestor;
  rank: number;
}) {
  const { format } = useCurrency();
  return (
    <Card className="w-full max-w-56">
      <div className="relative flex flex-col items-center justify-center">
        <img
          src={getImageUrl(investor.profile?.profile_photo ?? '')}
          alt={maskName(investor.name)}
          className="mb-2 size-20 rounded-full object-cover"
        />
        <h3 className="font-medium">{maskName(investor.name)}</h3>
        <p className="font-lexend text-sm font-light text-white/50">
          {format(investor.investments_sum_amount ?? 0)}
        </p>
        {rank !== 1 && (
          <p className="mt-1 font-architects text-xs text-primary">
            {rank === 2 ? '2nd' : '3rd'}
          </p>
        )}
      </div>
    </Card>
  );
}