'use client'

import { useState } from 'react'
import Header from '@/components/Header'
import CreateTab from '@/components/tabs/CreateTab'
import { useSettings } from '@/lib/context/SettingsContext'

export default function Home() {
  const { settings, isLoaded, isMounted } = useSettings()
  const [isConfigured, setIsConfigured] = useState(false)

  if (!isMounted || !isLoaded) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
        <div className="text-white">Loading...</div>
      </div>
    )
  }

  const checkConfiguration = () => {
    if (settings.opencodeApiKey && settings.api34aiKey) {
      setIsConfigured(true)
    }
  }

  return (
    <div className="min-h-screen bg-background">
      <Header />
      <main className="pt-20 pb-8 px-4">
        <div className="max-w-6xl mx-auto">
          <CreateTab />
        </div>
      </main>
    </div>
  )
}