import React from "react";
import Image from "next/image";

export interface ProjectDisplayProps {
	title: string;
	authors: string[];
	prizeCategory: string;
	description: string;
	imageUrl: string;
	imageOnLeft: boolean;
}

export default function ProjectDisplay(props: ProjectDisplayProps) {
	return (
		<>
			<DesktopProjectDisplay {...props} />
			<MobileProjectDisplay {...props} />
		</>
	);
}

function DesktopProjectDisplay(props: ProjectDisplayProps) {
	return (
		<div
			className={`hidden xl:flex  ${props.imageOnLeft ? "flex-row-reverse" : "flex-row"} items-center justify-between`}
		>
			<div className="w-1/2">
				<h1 className="font-modern text-white text-left text-4xl text-shadow-md pb-4 ">{props.prizeCategory}</h1>
				<h2 className="font-modern pb-2 font-medium text-2xl text-white">{props.title}</h2>
				<hr />
				<p className="font-neutral2">{props.authors.join(", ")}</p>
				<hr />
				<p className="mt-2 font-neutral2">{props.description}</p>
			</div>
			<div className="w-2/5">
				<Image src={props.imageUrl} alt={props.title} height={500} width={500} loading="eager"/>
			</div>
		</div>
	);
}

function MobileProjectDisplay(props: ProjectDisplayProps) {
	return (
		<div className="flex xl:hidden flex-col items-start justify-start w-fit">
			<div className="w-full flex items-center justify-center">
				<Image src={props.imageUrl} alt={props.title} height={500} width={500} className="previousWinnersImages" />
			</div>
			<div>
				<h1 className="font-modern text-white text-center text-4xl text-shadow-md p-2">{props.prizeCategory}</h1>
				<h2 className="font-modern text-white text-center text-2xl font-medium p-2">{props.title}</h2>
				<hr />
				<p className="font-sans text-white text-lg p-2 text-center">{props.authors.join(", ")}</p>
				<hr />
				<p className="mt-2">{props.description}</p>
			</div>
		</div>
	);
}