import { headers as getHeaders } from 'next/headers.js'
import { getPayload } from 'payload'
import React from 'react'

import config from '@/payload.config'
import '../styles.css'
import { Button } from '@/components/ui/button'
import { InstagramIcon } from '@/components/icons/socials'
import { ButtonArrow } from '@/components/icons/button-icon'
import { FaQSection } from '@/components/pages/Home/FaqSection'
import { NewsSectionBlock } from '@/components/pages/Home/NewsSection'
import WhyChooseUs from '@/components/pages/Home/WhyChooseUs'
import { ReviewsSectionBlock } from '@/components/pages/Home/ReviewsSection'
import { Requirements } from '@/components/pages/Home/Requirements'
import { HeroSectionBlock } from '@/components/pages/Home/HeroSection'
import { ChooseTesla } from '@/components/pages/Home/ChooseTesla'
import { ContactSectionForm } from '@/globals/ContactForm/Component'
import { Car } from '@/payload-types'
import { customFetch } from '@/lib/utils/apiClient'
import { Vehicle, VehicleApiResponse } from '@/lib/types/api/vehicle'
import { getCurrentLocale } from '@/locales/server'

export default async function HomePage() {
  const headers = await getHeaders()
  const payloadConfig = await config
  const payload = await getPayload({ config: payloadConfig })
   const locale = await getCurrentLocale()

  const { faq, news, reviews, whyChooseUs, requirements, bookTesla, hero } =
    await payload.findGlobal({
      slug: 'home',
      depth: 1,
      locale,
    })

  // const cars = await payload.find({
  //   collection: 'cars',
  //   limit: 1000,
  //   pagination: false,
  //   depth: 1,
  // })

  let vehicleData: Vehicle[] = []
  try {
    const vehicleResponse = await customFetch('https://api.rentsyst.com/v2/vehicle', true, 'GET')
    const data: VehicleApiResponse = await vehicleResponse.json()
    vehicleData = Array.isArray(data) ? data : []
  } catch {
    console.error('Failed to fetch vehicles from rentsyst API')
  }

  return (
    <div className="home">
      <HeroSectionBlock heroProps={hero} cars={vehicleData} />
      <WhyChooseUs {...whyChooseUs} />
      <Requirements {...requirements} />
      <ChooseTesla {...bookTesla} />
      <NewsSectionBlock {...news} />
      <FaQSection {...faq} />
      <ReviewsSectionBlock {...reviews} />
      <ContactSectionForm />
    </div>
  )
}
