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

const ServicePageContainer = () => {
	const { data: contactData } = useGetPublicContactQuery();
	const { data: galleryData } = useGetPublicGalaryQuery();
	const serviceBanners = contactData?.filter(
		(contact) => contact.section === GallerySection.SERVICES_BANNER
	);
	const serviceBannerGalary = galleryData?.filter(
		(contact) => contact.section === GallerySection.SERVICES_BANNER
	);
	const phone =
		(serviceBanners &&
			serviceBanners.length > 0 &&
			serviceBanners[0].phone) ||
		undefined;
	const serviceBannerBg =
		(serviceBannerGalary &&
			serviceBannerGalary.length > 0 &&
			serviceBannerGalary[0].image) ||
		undefined;

	return (
		<div>
			<MinimalHeroBanner
				title="Services"
				subtitle="Explore our comprehensive range of luxury transportation services."
				backgroundImage={serviceBannerBg ?? '/default/service-banner.png'}
			/>
			<SerivicesForService />
			<FinestLuxury />
			<CTA phone={phone} />
		</div>
	);
};

export default ServicePageContainer;