import { useRouter } from 'next/router';
import { FiSearch } from 'react-icons/fi';

interface ChatListProps {
  className?: string;
}

const ChatList = ({ className }: ChatListProps) => {
  const router = useRouter();

  const chats = [
    {
      id: 1,
      name: 'Jordan Belly',
      message: 'Hi Jordan where are you',
      time: '1 min',
      unread: 2,
      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,
      name: 'Savannah Nguyen',
      message: 'Hi Jordan where are you',
      time: '1 min',
      unread: 3,
      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,
      name: 'Jane Cooper',
      message: 'Hi Jordan where are you',
      time: '1 min',
      unread: 2,
      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}>
      <div className="chat-list-header">
        <h1 className="chat-list-title">Chats</h1>
        <div className="search-container">
          <FiSearch className="search-icon" size={20} />
          <input type="text" placeholder="Search" className="search-input" />
        </div>
      </div>

      <div className="chat-items">
        {chats.map((chat) => (
          <button
            key={chat.id}
            onClick={() => router.push('#content')}
            className="chat-item"
          >
            <div className="avatar-container">
              <img src={chat.avatar} alt={chat.name} className="avatar" />
              <span className="online-indicator" />
            </div>
            <div className="chat-item-content">
              <div className="chat-item-header">
                <span className="chat-name mb-0">{chat.name}</span>
                <p className="chat-message mb-0">{chat.message}</p>
              </div>
            </div>

            <div className="d-flex chat-time-box flex-column gap-2 justify-content-center align-items-center">
              <div className="chat-counter">2</div>
              <div className="chat-time">1 min</div>
            </div>
          </button>
        ))}
      </div>
    </div>
  );
};

export default ChatList;