import profile from '../../../../assets/profile.svg';
import CreateGroupButton from './CreateGroupButton.tsx';
import AddGroupMember from './AddGroupMember.tsx';
import { UsersRound } from 'lucide-react';
import { useChat } from '@/context/chat/useChat.ts';

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

        <p>
          {currentContact ? currentContact.username : null} user id:{' '}
          {currentContact?.user_id} conv id: {currentContact?.conversation_id}
        </p>
      </div>
      <div className="flex-grow"></div>

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

export default ContactProfile;
