'use client'

import { useState } from 'react'
import JourneyForm from './components/JourneyForm'
import DataPreview from './components/DataPreview'
import { Separator } from '@/components/ui/separator'
import { Car } from 'lucide-react'

export default function Home() {
  const [calculatedData, setCalculatedData] = useState(null)
  const [loading, setLoading] = useState(false)
  const [formData, setFormData] = useState(null)

  return (
    <main className="min-h-screen">
      <div className="max-w-7xl mx-auto px-6 py-12 md:px-12 md:py-16">
        <div className="mb-12">
          <div className="flex items-center gap-4 mb-4">
            <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-primary text-primary-foreground">
              <Car className="h-8 w-8" />
            </div>
            <div>
              <h1 className="text-4xl font-bold tracking-tight">
                Kniha Jízd
              </h1>
              <p className="text-lg text-muted-foreground mt-1">
                Automatizovaný systém pro správu knihy jízd
              </p>
            </div>
          </div>
          <Separator className="mt-8" />
        </div>

        <div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
          <JourneyForm
            onDataCalculated={setCalculatedData}
            setLoading={setLoading}
            onFormDataChange={setFormData}
          />
          <DataPreview data={calculatedData} loading={loading} formData={formData} />
        </div>
      </div>
    </main>
  )
}