chat app

import Image from "next/image";
import React from "react";
import { BiSolidPurchaseTagAlt } from "react-icons/bi";
import { BsEnvelopeFill } from "react-icons/bs";
import {
  FaBullhorn,
  FaCaretDown,
  FaShoppingCart,
  FaStar,
} from "react-icons/fa";
import { FaMeta } from "react-icons/fa6";
import { IoOptionsOutline, IoSearchOutline } from "react-icons/io5";
import { TbStack2 } from "react-icons/tb";

import MainChatBody from "../ChatBody";

const LeftSectionSearchChat = () => {
  return (
    <div className="w-[80%] h-full  flex flex-col">
      <div className="drop-shadow-[1px_1px_1px_rgba(0,0,0,0.15)]  dark:bg-[#1F2125] dark:text-white bg-white rounded-md  flex flex-col h-full">
        <div className="flex h-full">
          {/* Chat User List */}
          <div className="border-r-1 border-custom min-w-[350px] max-w-[360px]  flex-none flex flex-col">
            <div className="h-full py-4">
              {/* Search section */}
              <div className="sticky pb-1 pl-4 pr-1 bg-white top-3 ">
                <div className="flex items-center justify-between">
                  <div className="flex items-center border-1 border-custom py-[6px] px-2 rounded-md w-full">
                    <IoSearchOutline className="mr-[6px] text-xl" />
                    <input
                      type="text"
                      placeholder="Search"
                      className="focus:outline-none"
                    />
                  </div>

                  <div
                    className="flex tooltip tooltip-top items-center ml-1.5 transition duration-300 ease-in-out  px-3 py-2 hover:bg-[#F4F4F4] rounded-md w-fit  cursor-pointer"
                    data-tip="Manage"
                  >
                    <TbStack2 className="mr-1 text-xl" />
                    <p className="text-[15px] font-medium">Manage</p>
                  </div>
                </div>

                <div className="flex items-center gap-x-2 mt-1.5">
                  <div className="flex items-center transition duration-300 ease-in-out  px-2 py-1 hover:bg-[#E5E8F0] rounded-sm cursor-pointer">
                    <BsEnvelopeFill className="text-[13px] mr-1.5 text-[#464646ca]" />
                    <p className="text-sm">Unread</p>
                  </div>

                  <div
                    className="flex tooltip tooltip-top items-center transition duration-300 ease-in-out  px-2 py-1 hover:bg-[#E5E8F0] rounded-sm cursor-pointer"
                    data-tip="Ad Responses"
                  >
                    <FaBullhorn className="text-[13px] mr-1.5 text-[#464646ca]" />
                    <p className="text-sm line-clamp-1 text-ellipsis max-w-[40px]">
                      Ad responses
                    </p>
                  </div>

                  <div className="flex items-center transition duration-300 ease-in-out  px-2 py-1 hover:bg-[#E5E8F0] rounded-sm cursor-pointer">
                    <BiSolidPurchaseTagAlt className="text-[13px] mr-1.5 text-[#464646ca]" />
                    <p className="text-sm">Labels</p>
                  </div>

                  <div className="flex items-center transition duration-300 ease-in-out  px-2 py-1 hover:bg-[#E5E8F0] rounded-sm cursor-pointer">
                    <IoOptionsOutline className="text-[18px] text-[#464646ca] mr-1.5" />
                    <FaCaretDown className="text-[18px] text-[#464646ca]" />
                  </div>
                </div>
              </div>

              {/* user list section  */}
              <div className="h-full overflow-x-auto">
                <div className="mt-2 transition duration-300 ease-in-out cursor-pointer hover:bg-[#F5F6F7] p-3">
                  <div className="flex items-center">
                    <div>
                      <Image
                        alt="Brand Logo"
                        src="/images/Klassy_missy_logo.png"
                        width={48}
                        height={48}
                        className="w-[48px] h-[48px] rounded-full"
                      />
                    </div>

                    {/* Other User Info */}
                    <div className="ml-[14px] flex-grow">
                      {/* User Name */}
                      <div className="flex items-center justify-between">
                        <div>
                          <p className="text-[rgba(28,43,51,1)] text-[15px]">
                            Abdullah Bin Omor
                          </p>
                        </div>

                        <div>
                          <p className="text-[#90949c] text-[14px]">11:09 AM</p>
                        </div>
                      </div>

                      <div className="mt-1">
                        <p className="text-[12px] line-clamp-1 max-w-[250px] text-ellipsis">
                          How to pay with Bkash ? We aim to honor all change or
                          cancellation requests
                        </p>
                      </div>

                      <div className="flex items-center justify-between mt-1">
                        <div className="flex items-center gap-x-1.5">
                          <div className="bg-[#F0F3F7] px-1.5 py-[1px] rounded-[4px] flex items-center">
                            <p className="text-[12px]">intake</p>
                          </div>

                          <div className="bg-[#F0F3F7] px-1 py-[1px] rounded-sm flex items-center">
                            <FaMeta className="text-[12px] mr-1" />
                            <p className="text-[12px]">user id</p>
                          </div>
                        </div>

                        <div>
                          <FaStar className="text-[22px]" />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Chat Body */}
          <div className="flex-grow h-full">
            <MainChatBody />
          </div>
        </div>
      </div>
    </div>
  );
};

export default LeftSectionSearchChat;