"use client"

import { useState } from "react"

// Importing necessary components
import { SettingsArea } from "@/components/Exporter/SettingsArea"
import { UploadArea } from "@/components/Exporter/UploadArea"
import { PreviewArea } from "@/components/Exporter/PreviewArea"

import { Footer } from "@/components/Footer/Footer"

export default function Home() {
  const [hasContent, setHasContent] = useState(false)
  const [isExporting, setIsExporting] = useState(false)

  const handleExport = () => {
    setIsExporting(true)
    setTimeout(() => setIsExporting(false), 2000)
  }

  return (
    <div className="flex flex-col min-h-screen">
      <main className="flex-1 py-10 px-4 md:px-6">
        <div className="w-full max-w-7xl mx-auto space-y-8">
          
          {/* Header Area (Optional) */}
          <div>
            <h1 className="text-2xl font-bold tracking-tight">Web Exporter</h1>
            <p className="text-zinc-500 dark:text-zinc-400">
              Convert your web assets to PDF, PNG, or JSON.
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            
            {/* Left Column: Settings */}
            <div className="md:col-span-1">
              <SettingsArea 
                onExport={handleExport} 
                isExporting={isExporting}
              />
            </div>

            {/* Right Column: Dynamic Content */}
            <div className="md:col-span-2 gap-y-6 flex flex-col">
              <UploadArea />
              <PreviewArea />
            </div>

          </div>
        </div>
      </main>

      <Footer />
    </div>
  )
}