import ChatSend from '../ui/ChatSend';

interface ChatWindowProps {
  className?: string;
}

const ChatWindow = ({ className }: ChatWindowProps) => {
  const messages = [
    {
      id: 1,
      text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit consequat, suspendisse Lorem ipsum dolor sit amet consectetur adipisicing elit consequat, suspendisse Lorem ipsum dolor sit amet consectetur adipisicing elit consequat, suspendisse',
      time: '12:00 AM',
      sender: 'them',
      avatar:
        'https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D',
    },
    {
      id: 2,
      text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit consequat, suspendisse',
      time: '12:00 AM',
      sender: 'me',
      avatar:
        'https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D',
    },
    {
      id: 3,
      text: 'Lorem ipsum dolor sit amet consectetur adipisicing elit consequat, suspendisse Lorem ipsum dolor sit amet consectetur adipisicing elit consequat, suspendisse Lorem ipsum dolor sit amet consectetur adipisicing elit consequat, suspendisse',
      time: '12:00 AM',
      sender: 'them',
      avatar:
        'https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D',
    },
  ];

  return (
    <div className={className} id="content">
      <div className="chat-header">
        <img
          src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHx8MA%3D%3D"
          alt="Jordan belly"
          className="avatar"
        />
        <div>
          <h5 className="chat-name mb-0">Jordan belly</h5>
          <p className="chat-status mb-0">User</p>
        </div>
      </div>

      <div className="chat-messages">
        {messages.map((message) => (
          <div
            key={message.id}
            className={`message position-relative ${message.sender === 'me' ? 'sent' : 'received'}`}
          >
            <img src={message.avatar} alt="" className="avatar" />
            <div className="message-content" data-message-time={message.time}>
              <p className="mb-0">{message.text}</p>
              <span className="message-time"></span>
            </div>
          </div>
        ))}
      </div>

      <ChatSend />
    </div>
  );
};

export default ChatWindow;