'use client';
import { GallerySection } from '@/app/generated/prisma/enums';
import MinimalHeroBanner from '@/components/banner';
import Experience from '@/components/Experience';
import CTA from '@/components/landing/CTA';
import { SafetyConvenience } from '@/components/SafetyConvenience';
import {
	useGetPublicContactQuery,
	useGetPublicGalaryQuery,
} from '@/store/slice/publicApi';

const BookingPageContainer = () => {
	const { data: contactData } = useGetPublicContactQuery();
	const { data: galleryData } = useGetPublicGalaryQuery();
	const bookingBanners = contactData?.filter(
		(contact) => contact.section === GallerySection.BOOK_BANNER
	);
	const bookingBannerGalary = galleryData?.filter(
		(contact) => contact.section === GallerySection.BOOK_BANNER
	);
	const phone =
		(bookingBanners &&
			bookingBanners.length > 0 &&
			bookingBanners[0].phone) ||
		undefined;
	const bookingBannerBg =
		(bookingBannerGalary &&
			bookingBannerGalary.length > 0 &&
			bookingBannerGalary[0].image) ||
		undefined;
	return (
		<div>
			<MinimalHeroBanner
				title="Book Your Luxury Ride"
				subtitle="Experience unparalleled comfort and style with our premium fleet of vehicles. Available 24/7 for your convenience."
				backgroundImage={bookingBannerBg ?? '/default/fleet-banner.png'}
			/>
			<SafetyConvenience />
			<Experience />
			<CTA phone={phone} />
		</div>
	);
};

export default BookingPageContainer;