import React from 'react';
import { color, Icon, Icons, Text, Tooltip, TooltipProvider } from 'folds';
import { useUserVerifiedStatus } from '../hooks/useUserVerifiedStatus';

type MemberVerificationBadgeProps = {
  userId: string;
};

export function MemberVerificationBadge({ userId }: MemberVerificationBadgeProps) {
  const vs = useUserVerifiedStatus(userId);
  if (vs === 'unknown') return null;
  const iconColor = vs === 'verified' ? color.Success.Main : color.Warning.Main;
  const label = vs === 'verified' ? 'Identity verified' : 'Not verified';
  return (
    <TooltipProvider
      position="Top"
      tooltip={
        <Tooltip>
          <Text size="T200">{label}</Text>
        </Tooltip>
      }
    >
      {(ref) => (
        <span
          ref={ref}
          title={label}
          style={{ display: 'inline-flex', alignItems: 'center', flexShrink: 0 }}
        >
          <Icon size="100" src={Icons.ShieldUser} style={{ color: iconColor }} />
        </span>
      )}
    </TooltipProvider>
  );
}