import React from 'react';
import { 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 color =
    vs === 'verified' ? 'var(--tc-positive-normal, #5effc4)' : 'var(--tc-warning-normal, #ffcc55)';
  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 }} />
        </span>
      )}
    </TooltipProvider>
  );
}