anycall-h5/components/VirtualIdCard.tsx

import React from 'react';
import ShieldIcon from './icons/ShieldIcon';

interface VirtualIdCardProps {
  name: string;
  avatarUrl: string;
  virtualId: string;
  totalScore: number;
}

const VirtualIdCard: React.FC<VirtualIdCardProps> = ({ name, avatarUrl, virtualId, totalScore }) => {
  return (
    <div className="bg-gradient-to-br from-slate-900 via-slate-800 to-sky-900 rounded-2xl shadow-2xl p-6 text-white overflow-hidden relative group">
      {/* Decorative Circles */}
      <div className="absolute -top-10 -right-10 w-40 h-40 bg-sky-500/10 rounded-full"></div>
      <div className="absolute -bottom-16 -left-12 w-48 h-48 bg-slate-500/10 rounded-full"></div>

      <div className="relative z-10 flex flex-col sm:flex-row items-center gap-6">
        <img
          src={avatarUrl}
          alt={name}
          className="w-24 h-24 rounded-full border-4 border-slate-600 shadow-lg object-cover"
        />
        <div className="text-center sm:text-left">
          <h1 className="text-3xl font-bold tracking-wide">{name}</h1>
          <p className="text-sm text-slate-400 font-mono tracking-widest mt-1">{virtualId}</p>
        </div>
      </div>
      
      {/* Holographic Security Tag */}
      <div 
        className="absolute bottom-4 right-6 w-14 h-14 flex items-center justify-center z-20" 
        aria-label="Holographic Security Seal"
      >
        <div className="absolute inset-0 rounded-full bg-slate-700/30 backdrop-blur-sm border border-white/10"></div>
        <div className="absolute inset-1 rounded-full border border-white/10 animate-[spin_8s_linear_infinite]"></div>
        <div className={`relative w-12 h-12 rounded-full flex items-center justify-center overflow-hidden ${totalScore >= 30 ? 'holographic-gleam' : ''}`}>
          <div className="absolute inset-0 bg-gradient-to-br from-sky-400/20 to-purple-500/20"></div>
          <ShieldIcon />
        </div>
      </div>
    </div>
  );
};

export default VirtualIdCard;