'use client'

import { IconButton } from '@/components/ui/button'
import Input from './Input'
import MessageList from './MessageList'
import { useChatStore } from './store'
import Sider from './Sider'

export default function ChatPage() {
  const isSidebarOpen = useChatStore((store) => store.isSidebarOpen)
  const setIsSidebarOpen = useChatStore((store) => store.setIsSidebarOpen)

  return (
    <div className="flex h-full">
      <div className="relative w-full flex-1 flex justify-center">
        <div className="max-w-[752px] w-full h-full flex flex-col">
          <MessageList />
          <Input />
        </div>
        <IconButton
          onClick={() => setIsSidebarOpen(!isSidebarOpen)}
          className="absolute top-1 right-1"
          variant="ghost"
          size="small"
        >
          <i className="iconfont-v2 iconv2-zhedie" />
        </IconButton>
      </div>

      {isSidebarOpen && <Sider />}
    </div>
  )
}