"use client";

import Link from "next/link";
import { api } from "~/trpc/react";
import { VscLoading } from "react-icons/vsc";

const RecipeDisplay = () => {
    const recipes = api.recipe.getMine.useQuery().data;

    return recipes ? (
        <>
            <div className="w-full px-4">
                <div className="mx-auto mb-6 flex max-w-[900px] flex-wrap items-center justify-evenly gap-2 gap-y-4 rounded-2xl border p-4">
                    {recipes.length > 0 ? (
                        recipes.map((recipe) => (
                            <Link
                                key={recipe.id}
                                href={`/edit-recipe/${recipe.id}`}
                                className="cursor-pointer rounded-2xl bg-zinc-100 p-4 hover:opacity-75"
                            >
                                <h1 className="unselectable px-6 text-xl">
                                    {recipe.title}
                                </h1>
                                {/* <div className="mx-auto mt-2 h-[1px] w-4/5 bg-zinc-200"></div> */}
                            </Link>
                        ))
                    ) : (
                        <h1 className="text-xl text-zinc-500">
                            No recipes here...
                        </h1>
                    )}
                </div>
            </div>
        </>
    ) : (
        <div className="px-4">
            <div className="mx-auto flex max-w-[900px] items-center justify-center rounded-2xl border p-4 py-12">
                <VscLoading className="animate-spin" size={34} />
            </div>
        </div>
    );
};

export default RecipeDisplay;