import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable"
import EntryBody from "@/components/EntryBody"
import EntryMetadata from "@/containers/EntryMetadata"
import { useIsMobile } from "@/hooks/use-mobile"

export default function Entry({ entryTitle, entryBody, history, metadata, isLoading }) {
   const isMobile = useIsMobile()

   const topPanelSize = isMobile ? 80 : 75
   const bottomPanelSize = isMobile ? 20 : 25
   const handleSize = isMobile ? "5px" : "1px"
   return (
      <ResizablePanelGroup direction="vertical" className="w-full h-full">
         <ResizablePanel defaultSize={topPanelSize}>
            <div className="h-full overflow-auto">
               <EntryBody body={entryBody} isLoading={isLoading} />
            </div>
         </ResizablePanel>
         <ResizableHandle withHandle style={{ height: handleSize }} />

         <ResizablePanel key={`bottom-${bottomPanelSize}`} defaultSize={bottomPanelSize}>
            <div className="h-full overflow-auto">
               <EntryMetadata entryTitle={entryTitle} history={history} metadata={metadata} />
            </div>
         </ResizablePanel>
      </ResizablePanelGroup>
   )
}