import profile from '../../../assets/profile.svg';
import CreateGroupButton from './CreateGroupButton.tsx';
import AddGroupMember from './AddGroupMember.tsx';
import { ContactsProps } from '../../pages/Chat.tsx';
import { UsersRound } from 'lucide-react';

type ContactProfileProps = {
  contact: ContactsProps | null;
};

function ContactProfile({ contact }: ContactProfileProps) {
  return (
    <div className="flex items-center">
      <div className="flex items-center p-2">
        {contact?.type === 'group' ? (
          <UsersRound className="w-5 mr-2" />
        ) : (
          <img className="w-4 mr-2 invert" src={profile} alt="profile img" />
        )}

        <p>{contact ? contact.username : null}</p>
      </div>
      <div className="flex-grow"></div>

      <div>
        <CreateGroupButton />
      </div>
      <div>
        {contact?.type === 'group' ? (
          <AddGroupMember contact={contact} />
        ) : null}
      </div>
    </div>
  );
}

export default ContactProfile;
