import FadeInText from '@/components/shared/FadeInText'
import { Section } from '@/components/ui/section'
import { BookTeslaSection, Media } from '@/payload-types'
import CarCard from '@/components/shared/cards/CarCard'
import ImageLoader from '@/lib/utils/ImageLoader'
import ScrollToContactButton from './ScrollToContactButton'
import StickyStackCards from '@/components/shared/StickyStackCards'
import { customFetch } from '@/lib/utils/apiClient'
import { VehicleApiResponse, Vehicle } from '@/lib/types/api/vehicle'

export const ChooseTesla = async ({ title, subtitle, contact }: BookTeslaSection) => {
  let vehicles: Vehicle[] = []
  try {
    const vehicleResponse = await customFetch('https://api.rentsyst.com/v2/vehicle', true, 'GET')
    const vehicleData: VehicleApiResponse = await vehicleResponse.json()
    if (Array.isArray(vehicleData)) {
      vehicles = vehicleData.slice(0, 4)
    }
  } catch {
    console.error('Failed to fetch vehicles from rentsyst API')
  }

  return (
    <Section sectionClass="py-30" boxClass="">
      <h2 className="h2 mb-2 text-base-white">
        <FadeInText text={title} />
      </h2>
      <p className="b1-regular text-grey-100">
        <FadeInText delayBeforeStart={500} text={subtitle} />
      </p>
      <div className="hidden md:grid md:grid-cols-2 lg:grid-cols-4 md:gap-5 lg:gap-4 mt-8">
        {vehicles.map((vehicle) => (
          <CarCard
            id={vehicle.id}
            key={vehicle.id}
            type={`${vehicle.mark}`}
            price={vehicle.price}
            image={vehicle.thumbnail}
            carLabels={[vehicle.body_type, `${vehicle.number_seats} seats`].filter(Boolean)}
          />
        ))}
      </div>
      <div className="md:hidden mt-8">
        <StickyStackCards className="mb-[65px]" cardGap={16}>
          {vehicles.map((vehicle, i) => (
            <CarCard
              id={vehicle.id}
              key={vehicle.id}
              type={`${vehicle.brand} ${vehicle.mark}`}
              price={vehicle.price}
              image={vehicle.thumbnail}
              carLabels={[vehicle.body_type, `${vehicle.number_seats} seats`].filter(Boolean)}
              isActive
            />
          ))}
        </StickyStackCards>
      </div>
      {contact && (contact.image || contact.title) && (
        <div className="mt-8 relative p-4 md:py-[40px] ma:px-8">
          <div className="absolute inset-0 overflow-hidden rounded-[12px]">
            {contact.image && (
              <ImageLoader
                media={contact.image as Media}
                alt=""
                className="w-full h-full object-cover object-center scale-200  md:scale-none"
              />
            )}
          </div>

          <div className="absolute w-[101%] h-full left-[-1px] top-0 bg-[linear-gradient(270deg,rgba(0,0,0,0)_0%,#000000_105.88%)]" />

          <div className="max-w-[510px] z-10 relative">
            <p className="b1-semibold md:subheadline-semibold text-base-white">{contact?.title}</p>
            <p className="b3-regular md:b2-regular text-grey-50 md:text-grey-100 mt-2">
              {contact?.subtitle}
            </p>
            <ScrollToContactButton />
          </div>
        </div>
      )}
    </Section>
  )
}

export default ChooseTesla
