import { useNavigate } from 'react-router'
import { List } from 'lucide-react'
import { cn, interactive } from '@/lib'
import { MainLayout, MainHeaderBar } from '@/layouts'
import { ChatContainer, ItemSection, RemainingTime } from '@/features/chat'
import { SidebarFooter } from '@/features/auth'

export function ChatPage() {
  return (
    <MainLayout
      sidebarWidth="chat"
      scrollX
      logoAction={<ListNavButton />}
      sidebar={<Sidebar />}
      header={
        <MainHeaderBar className="px-[140px]">
          <RemainingTime />
        </MainHeaderBar>
      }
    >
      <ChatContainer />
    </MainLayout>
  )
}

function ListNavButton() {
  const navigate = useNavigate()
  return (
    <button
      type="button"
      aria-label="목록으로 이동"
      onClick={() => navigate('/list')}
      className={cn('text-foreground', interactive)}
    >
      <List size={24} />
    </button>
  )
}

function Sidebar() {
  return (
    <>
      <ItemSection />
      <SidebarFooter />
    </>
  )
}

export default ChatPage