import { Avatar } from '../../atoms';

type ProfileProps = { profileImage: string; userName: string; subheader?: string };

const Profile = ({ profileImage, userName, subheader }: ProfileProps) => {
  return (
    <div className='flex items-center gap-3'>
      <Avatar image={profileImage} size="lg" />
      <div className="flex flex-col justify-between flex-shrink-1">
        <div className='text-mono-800 text-base font-medium leading-[20px]'>
          {userName}
        </div>
        {subheader && (
          <div className='text-mono-500 text-sm leading-[18px]'>
            {subheader}
          </div>
        )}
      </div>
    </div>
  );
};

export { Profile, ProfileProps };
