'use client';

import React from 'react';
import { useChatStore } from '../../store';
import Image from 'next/image';
import IconFont from '@/components/ui/iconFont';

const ChatHistory = React.memo(() => {
  const setHistoryListOpen = useChatStore((state) => state.setHistoryListOpen);

  return (
    <div className="flex h-full w-full flex-col bg-[rgba(22,18,29,1)] pt-7.5 pr-5 pl-10">
      <div className="flex items-center justify-between">
        <span className="text-lg font-black">Chat</span>
        <div
          className="flex-center h-10 w-10 cursor-pointer rounded-full border-1 border-white/30 hover:border-white/60"
          onClick={() => setHistoryListOpen(false)}
        >
          <IconFont type="icon-guanbi" size={30} />
        </div>
      </div>
      <div className="mt-7 flex-1">
        <div className="flex h-full flex-col gap-2.5">
          <div className="font-black">Today</div>
          <div className="relative flex h-25 gap-3.5 rounded-[10px] bg-white/5 p-2.5">
            <span className="absolute top-2.5 right-2.5 text-xs text-white/40">
              {'15:36'}
            </span>
            <div className="flex h-12.5 w-12.5 overflow-hidden rounded-full">
              <Image src={'/avator.png'} width={50} height={50} alt="avator" />
            </div>
            <div className="flex-1">
              <div className="text-[15px]/[17px] font-bold">character · 16</div>
              <a
                style={{ color: 'rgba(130, 180, 255, 1)' }}
                className="text-xs font-bold"
              >
                [from:The Lsat Oracle of Kael]
              </a>
              <div className="line-clamp-2 text-sm text-white/80">
                # Let's tuck today's whispers into a starlit pocket. # Let's
                tuck today's whispers into a starlit pocket. today's whispers
                into a starlit pocket.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
});
export default ChatHistory;
