import React from 'react';

const UserAvatar = ({ name, role, image }) => {
  const initials = name
    .split(' ')
    .map(n => n[0])
    .join('')
    .toUpperCase();

  return (
    <div className="flex items-center gap-3 pl-3 border-l border-gray-200 dark:border-gray-800">
      <div className="text-right hidden sm:block">
        <p className="text-sm font-medium text-gray-900 dark:text-white">{name}</p>
        <p className="text-xs text-gray-500 dark:text-gray-400">{role}</p>
      </div>
      <div className="w-9 h-9 rounded-full bg-[#941403] text-white flex items-center justify-center text-sm font-semibold">
        {image ? <img src={image} alt={name} className="w-full h-full rounded-full object-cover" /> : initials}
      </div>
    </div>
  );
};

export default UserAvatar;