import React from 'react';

interface AvatarProps {
  avatarUrl: string;
  name: string;
  type: 'CFO' | 'CPO' | 'CTO'; // Specific types
  speech?: string;
}

const Avatar: React.FC<AvatarProps> = ({ avatarUrl, name, type, speech }) => (
  <div className='flex flex-col items-center space-y-2'>
    {/* Avatar Image */}
    <div className='w-32 h-32'>
      <img
        src={avatarUrl}
        alt={`${name}'s Avatar`}
        className='w-full h-full border-2 border-gray-300 rounded-full'
      />
    </div>
    {/* Name and Type */}
    <span className='text-sm font-semibold'>{name}</span>
    <span className='text-xs font-medium text-gray-600'>{type}</span>
    {/* Speech Bubble */}
    {speech && (
      <div className='px-3 py-2 text-xs text-gray-800 bg-gray-200 border rounded shadow'>
        {speech}
      </div>
    )}
  </div>
);

export default Avatar;