import { useState } from "react"

import EditSidebar from "./partials/edit-sidebar"
import EditorCanvas from "./partials/editor-canvas"

import EditorHeader from "./partials/editor-header"
import EditorControls from "./partials/editor-controls"

const Editor = () => {
    const [isEditSidebarOpen, setIsEditSidebarOpen] = useState(false)
    const maxWidth = 350;

  const handleEditClick = () => {
    setIsEditSidebarOpen(!isEditSidebarOpen)
  }

  const handleCloseSidebar = () => {
    setIsEditSidebarOpen(false)
  }



  return (
    <div className="max-w-sm mx-auto min-h-screen flex flex-col relative space-y-4 py-6">
      <EditSidebar isOpen={isEditSidebarOpen} onClose={handleCloseSidebar} />

      <EditorHeader className="max-width-[350px]" />
      <EditorCanvas maxWidth={maxWidth} />
      <EditorControls className="max-width-[350px]" onEditClick={handleEditClick} isEditActive={isEditSidebarOpen} />
    </div>
  )
}


export default Editor;