import React from 'react';
import { translate } from '../../../Helper';

const Avatar = ({ src, alt, name }) => {
  if (src) {
    return (
      <img 
        className="ecre-w-[45px] ecre-h-[45px] ecre-rounded-full" 
        src={src} 
        alt={alt || name} 
      />
    );
  }
  
  return (
    <div className="ecre-w-[45px] ecre-h-[45px] ecre-rounded-full ecre-bg-gray-400 ecre-flex ecre-items-center ecre-justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="23" height="24" viewBox="0 0 23 24" fill="none">
            <path d="M4.67622 6.6C4.67622 4.84957 5.38445 3.17084 6.64511 1.9331C7.90577 0.695355 9.61559 0 11.3984 0C13.1813 0 14.8911 0.695355 16.1518 1.9331C17.4124 3.17084 18.1207 4.84957 18.1207 6.6C18.1207 8.35043 17.4124 10.0292 16.1518 11.2669C14.8911 12.5046 13.1813 13.2 11.3984 13.2C9.61559 13.2 7.90577 12.5046 6.64511 11.2669C5.38445 10.0292 4.67622 8.35043 4.67622 6.6ZM0.398438 20.4C0.398438 18.8087 1.04228 17.2826 2.18834 16.1574C3.3344 15.0321 4.88878 14.4 6.50955 14.4H16.2873C17.9081 14.4 19.4625 15.0321 20.6085 16.1574C21.7546 17.2826 22.3984 18.8087 22.3984 20.4V24H0.398438V20.4Z" fill="white"/>
        </svg>
    </div>
  );
};

const UserProfileCard = ({ 
    name = "Alan Murphy", 
    email = "sarah@email.com", 
    avatar = null,
    eligibilityStatus = "Active",
    statusColor = "green",
    className
}) => {
    const getStatusClasses = (status, color) => {
        const baseClasses = "ecre-inline-flex ecre-items-center ecre-gap-1.5 ecre-text-sm ecre-font-medium";

        switch (color) {
            case 'green':
            return `${baseClasses} ecre-text-green-700`;
            case 'red':
            return `${baseClasses} ecre-text-red-700`;
            case 'yellow':
            return `${baseClasses} ecre-text-yellow-700`;
            case 'blue':
            return `${baseClasses} ecre-text-blue-700`;
            default:
            return `${baseClasses} ecre-text-green-700`;
        }
    };

    const getDotClasses = (color) => {
        switch (color) {
            case 'green':
            return 'ecre-w-2 ecre-h-2 ecre-rounded-full ecre-bg-green-500';
            case 'red':
            return 'ecre-w-2 ecre-h-2 ecre-rounded-full ecre-bg-red-500';
            case 'yellow':
            return 'ecre-w-2 ecre-h-2 ecre-rounded-full ecre-bg-yellow-500';
            case 'blue':
            return 'ecre-w-2 ecre-h-2 ecre-rounded-full ecre-bg-blue-500';
            default:
            return 'ecre-w-2 ecre-h-2 ecre-rounded-full ecre-bg-green-500';
        }
    };

    return (
        <div className={`ecre-bg-white ecre-border ecre-border-gray-200 ecre-rounded-lg ecre-px-4 ecre-py-6 ecre-w-full ${className}`}>
            <div className="ecre-flex ecre-items-center ecre-justify-between">
                {/* Left side - Avatar and user info */}
                <div className="ecre-flex ecre-items-center ecre-gap-4">
                    <div className="ecre-flex-shrink-0 ">
                        <Avatar
                            src={avatar} 
                            alt={name}
                        />
                    </div>
                    <div className="userinfo-txt">
                        <div className="ecre-text-sm ecre-font-medium ecre-text-gray-900">{name}</div>
                        <div className="ecre-text-sm ecre-font-medium ecre-text-gray-500">{email}</div>
                    </div>
                </div>

                {/* Right side - Eligibility status */}
                <div className="ecre-ml-auto">
                    <div className="ecre-text-xs ecre-text-gray-500 ecre-font-normal ecre-mb-1">{translate('eligibility_status')}</div>
                    <div className={getStatusClasses(eligibilityStatus, statusColor)}>
                        <div className={getDotClasses(statusColor)}></div>
                        {eligibilityStatus}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default UserProfileCard;