import { HeroForm } from '@/components/shared/form/HeroForm'
import { Button } from '@/components/ui/button'
import { Section } from '@/components/ui/section'
import { HeroSection } from '@/payload-types'
import { ChevronRight } from 'lucide-react'
import Link from 'next/link'
import ImageLoader from '@/lib/utils/ImageLoader'
import { Vehicle } from '@/lib/types/api/vehicle'

export const HeroSectionBlock = ({
  heroProps,
  cars,
}: {
  heroProps: HeroSection
  cars: Vehicle[]
}) => {
  const { title, subtitle, btn, link, bg } = heroProps

  return (
    <div className="relative h-[946px] md:h-[846px]">
      <ImageLoader
        media={bg}
        alt="Background"
        className="absolute inset-0 w-full z-0 h-[946px] md:h-[846px] object-cover object-[calc(100%+450px)_center] tablet:object-center"
      />
      <div className="w-screen absolute bottom-0 left-0 h-[431px] bg-gradient-to-b from-black/0 to-black" />
      <Section sectionClass="pt-[120px] md:pt-[144px] lg:pt-[180px] bg-base-black min-h-[800px]">
        <div className="max-w-[682px] relative z-10">
          {title && <h1 className="text-left lg:h1 text-base-white h4">{title}</h1>}
          {subtitle && <span className="text-left b1-regular text-grey-100 mt-1">{subtitle}</span>}
          <div className="flex gap-4 items-center mt-6">
            <Link href="/catalog">
              <Button className=" button-small-medium md:button-large-medium" variant="primary">
                {btn}
              </Button>
            </Link>
            {link && link.url && (
              <Link href={link.url}>
                <Button
                  className="button-small-medium md:button-large-medium"
                  variant="link-primary"
                  RightIcon={<ChevronRight size={24} className="stroke-grey-50" />}
                >
                  {link.text}
                </Button>
              </Link>
            )}
          </div>
        </div>
        <div className="gradient-border gradient-border--white-light rounded-[12px] mt-[40px] tablet:mt-[144px] xl:mt-[88px]">
          <HeroForm cars={cars} className="mt-0" />
        </div>
      </Section>
    </div>
  )
}
