import React from 'react';
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-2'>
      <Avatar image={profileImage} size="lg" />
      <div>
        <div className='text-mono-900 text-[14px] font-medium leading-[20px]'>
          {userName}
        </div>
        {subheader && (
          <div className='text-mono-500 text-[12px] leading-[18px]'>
            {subheader}
          </div>
        )}
      </div>
    </div>
  );
};

export { Profile, ProfileProps };
