'use client';

import MinimalHeroBanner from '@/components/banner';
import CTA from '@/components/landing/CTA';
import ContactSection from '@/components/contact-section';
import TrustedClients from '@/components/TrustedClients';
import ContactForm from './ContactForm';
import {
	useGetPublicContactQuery,
	useGetPublicGalaryQuery,
} from '@/store/slice/publicApi';
import { GallerySection } from '@/app/generated/prisma/enums';

const ContactUsPageContainer = () => {
	const { data: contactData } = useGetPublicContactQuery();
	const { data: galleryData } = useGetPublicGalaryQuery();

	const contactUsBanners = contactData?.filter(
		(contact) => contact.section === GallerySection.CONTACT_BANNER
	);

	const contactUsBannerGalary = galleryData?.filter(
		(contact) => contact.section === GallerySection.CONTACT_BANNER
	);

	const phone = contactUsBanners?.[0]?.phone ?? undefined;
	const email = contactUsBanners?.[0]?.email ?? undefined;
	const location = contactUsBanners?.[0]?.location ?? undefined;
	const contactUsBannerBg = contactUsBannerGalary?.[0]?.image;

	return (
		<div className="space-y-16 md:space-y-20">
			<MinimalHeroBanner
				title="Contact Us"
				subtitle="Have questions or need assistance? Reach out to us."
				backgroundImage={
					contactUsBannerBg ?? '/default/contact-us-banner.png'
				}
			/>
			<ContactSection
				title="Contact Us"
				phone={phone}
				email={email}
				address={location}
			/>
			<ContactForm />
			<TrustedClients />
			<CTA phone={phone} />
		</div>
	);
};

export default ContactUsPageContainer;