export { ChatSidebar };

interface ChatSidebarProps {
  assistant: string;
  logoSrc: string;
  sidebarImageSrc: string;
  assistantAvatarSrc: string;
}

function ChatSidebar({
  assistant,
  logoSrc,
  sidebarImageSrc,
  assistantAvatarSrc,
}: ChatSidebarProps) {
  return (
    <>
      <nav className="bg-[#1b0103] shadow-lg min-h-[641px] min-w-[250px] py-6 px-6 font-[sans-serif] flex flex-col overflow-auto w-[272px] 2xl:h-screen">
        <div className="flex flex-wrap items-center cursor-pointer">
          <div className="relative w-full mb-12 ">
            <div className="mx-5 w-3/4 -inset-3mt-2">
              <a href="/">
                <img className="h-10" src={logoSrc} alt="Logo" />
              </a>
            </div>
          </div>
          <div className="relative items-center text-center mx-auto -mt-5">
            <img src={assistantAvatarSrc} className="w-24 h-24 border-white" />
          </div>
        </div>
        <div className="mt-2 items-center text-center mx-auto">
          <h2 className="text-xl font-extrabold text-gray-300">Maya</h2>
          <h2 className="text-xl font-extrabold text-gray-300">{assistant}</h2>
        </div>

        <ul className="space-y-3 flex-1 mt-5 mb-10 pl-5"></ul>
        <ul className="w-full">
          <li className="w-full">
            <a
              href=""
              className="text-gray-300 hover:text-white text-base flex items-center rounded-md"
            ></a>
          </li>
        </ul>
        <div className="w-[272px] -p-6 -m-6">
          <img
            src={sidebarImageSrc}
            alt="Sidebar Image"
            className="w-[272px]"
          />
        </div>
      </nav>
    </>
  );
}