import Image from "next/image";
import styles from "../../styling/intro.module.scss";
import profilePic from "../../../../public/portfolio/profile.png";

interface IIntroContentProps {
	greeting: string;
}

const IntroContent = ({ greeting }: IIntroContentProps): JSX.Element => {
	return (
		<div className={styles.mainContent}>
			<div className={styles.text} data-aos={"fade-in"} data-aos-duration={"500"}>
				<div className={styles.larger}>
					<span className={styles.greeting}>
						{greeting}
					</span>
					<br/>
						I am
					<b> Patryk Kuchta, </b>
						an aspiring
					<br/>
					<b>Artificial Intelligence Scientist</b>.
				</div>
				<span data-aos={"fade-in"} data-aos-offset={"200"}>
					<i>and yes, the greeting is synced to your time.</i>
				</span>
			</div>
			<div className={styles.profileContainer}>
				<Image
					src={profilePic}
					alt={"Frontal image showing Patryk Kuchta"}
					fill={true}
					priority={true}
					placeholder="blur"
				/>
			</div>
		</div>
	);
};

export default IntroContent;
