import { useEffect, useState } from "react";

import { NavLink, Link } from "react-router";

type CardProps = {
	title: string;
	description: string;
	timestamp: number;
	contributor: string;
	uuid: string;
	filepath: string;
};

export const Card = ({
	title,
	description,
	timestamp,
	contributor,
	uuid,
	filepath,
}: CardProps) => {
	const [showMenu, setShowMenu] = useState<boolean>(false);
	console.log(filepath);
	return (
		<div className="flex flex-row justify-center grow">
			<div className="rounded-xl shadow-xl max-w-96 min-w-lg p-8 border border-solid border-stone-100 bg-neutral-100">
				<img className="pb-4" src={"/uploads/" + filepath} />
				<p className="font-bold text-xl">{title}</p>
				<p className="text-lg italic">
					submitted {timestamp} by{" "}
					<span className="font-bold">{contributor}</span>
				</p>
				<p className="text-lg">
					<span className="font-bold">Description: </span>
					{description}
				</p>
				<hr className="m-4" />
				<div className="flex flex-col gap-4">
					<div className="flex flex-row gap-4">
						<div className="bg-pink-500 hover:bg-pink-700 cursor-pointer outline px-3 py-2 rounded-md grow justify-items-center">
							<p className="font-bold text-xl text-neutral-50">
								like
							</p>
						</div>

						<div
							className="bg-slate-500 hover:bg-slate-700 cursor-pointer outline px-3 py-2 rounded-md grow justify-items-center"
							onClick={() => setShowMenu(!showMenu)}
						>
							<p className="font-bold text-xl text-neutral-50">
								menu
							</p>
						</div>
					</div>
					{showMenu && (
						<>
							<Link to={`/edit/${uuid}`}>
								<div className="bg-yellow-500 hover:bg-yellow-700 cursor-pointer outline px-3 py-2 rounded-md grow justify-items-center">
									<p className="font-bold text-xl text-neutral-50">
										edit
									</p>
								</div>
							</Link>
							<div className="bg-green-500 hover:bg-green-700 cursor-pointer outline px-3 py-2 rounded-md grow justify-items-center">
								<p className="font-bold text-xl text-neutral-50">
									mark as posted
								</p>
							</div>
						</>
					)}
				</div>
			</div>
		</div>
	);
};