import * as React from 'react';
import {Layouts} from '@tesseract-design/viewfinder-react';
import {MainLandingSection, MainLandingSectionProps} from '@/components/molecules/MainLandingSection';
import {MakeSection, MakeSectionProps} from '@/components/molecules/MakeSection';
import {EnvisionSection, EnvisionSectionProps} from '@/components/molecules/EnvisionSection';
import {Footer} from '@/components/molecules/Footer';
import {FeaturedProjectSection, FeaturedProjectSectionProps} from '@/components/molecules/FeaturedProjectSection';
import {ContactCtaBanner} from '@/components/molecules/ContactCtaBanner';

export interface IndexLayoutProps {
	backgroundImages: MainLandingSectionProps['backgroundImages'];
	makeSectionData: MakeSectionProps['data'];
	envisionSectionData: EnvisionSectionProps['data'];
	featuredProjectData?: FeaturedProjectSectionProps[];
	onSubmit?: React.FormEventHandler<HTMLFormElement>;
}

export const IndexLayout: React.FC<IndexLayoutProps> = ({
	backgroundImages,
	makeSectionData,
	envisionSectionData,
	featuredProjectData = [],
	onSubmit,
}) => (
	<Layouts.Basic.Root className="contents">
		<MainLandingSection
			backgroundImages={backgroundImages}
		/>
		<div id="start" />
		<MakeSection
			data={makeSectionData}
		/>
		<EnvisionSection
			data={envisionSectionData}
		/>
		{featuredProjectData.map((featuredProjectProps) => (
			<FeaturedProjectSection
				key={featuredProjectProps.title}
				{...featuredProjectProps}
			/>
		))}
		<ContactCtaBanner
			onSubmit={onSubmit}
		/>
		<Footer/>
	</Layouts.Basic.Root>
);
