import {Link} from "react-router-dom"

type RecipeListItemProps = {
    title: string
    targetPath: string
    imageUrl?: string
}

/**
 * List item for the recipe list. Selecting an item navigates to the recipe
 */

export default function RecipeListItem({title, targetPath, imageUrl}: RecipeListItemProps) {
    return (
        <Link
            to={targetPath}
            className="h-60 w-60 block rounded-xl overflow-hidden shadow-md hover:shadow-lg transition-shadow bg-white dark:bg-gray-800 flex flex-col"
        >
            {/* Image or placeholder */}
            {imageUrl ? (
                <img
                    src={imageUrl}
                    alt={title}
                    className="w-full h-2/3 object-cover"
                />
            ) : (
                <div className="bg-gray-300 w-full h-2/3 flex justify-center items-center">
                    <label className="font-black text-gray-600">no image</label>
                </div>
            )}

            {/* Recipe name section (takes remaining space) */}
            <div className="flex-1 flex items-center justify-center p-2">
                <label className="text-lg font-semibold text-blue-400 dark:text-gray-100 text-center">
                    {title}
                </label>
            </div>
        </Link>
    );
}

