import { CreatingSite } from '@auto-launch/components/CreatingSite';
import { DescriptionGathering } from '@auto-launch/components/DescriptionGathering';
import { motion } from 'framer-motion';

const MAX_HEIGHT_SMALL = 400;

export const Launch = ({ skipDescription, lastHeight }) => {
	const widthClass = 'mx-auto w-full max-w-2xl';

	if (!skipDescription) {
		return (
			<motion.div
				className={widthClass}
				animate={{ opacity: 1 }}
				exit={{ opacity: 0 }}
				transition={{ duration: 0.4 }}
			>
				<DescriptionGathering />
			</motion.div>
		);
	}

	return (
		<motion.div
			className={widthClass}
			initial={{ opacity: 0, height: lastHeight || 'auto' }}
			animate={{ opacity: 1, height: MAX_HEIGHT_SMALL }}
			transition={{ duration: 0.4 }}
		>
			<CreatingSite height={MAX_HEIGHT_SMALL} />
		</motion.div>
	);
};