import { Link } from "react-router"
import useRoutes from "@/hooks/useRoutes"
import { UserType } from "@/types/UserType"
import { DishType } from "@/types/DishType"

interface Props {
    dishes: DishType[],
    users: UserType[]
}

const OnboardingBanner = ({ dishes, users }: Props) => {
    const routes = useRoutes();

    const steps = [
        {
            label: "Create a user",
            href: routes.user.create(),
            count: users.length
        }, {
            label: "Create a dish",
            href: routes.dish.create(),
            count: dishes.length
        }
    ]

    return (
        <div className="border-2 border-secondary p-6 text-lg">
            <div className="text-xl">Welcome to DishPlanner</div>
            <div className="my-5">To get you started, please follow these steps to set up your account. This will ensure a better
                experience.
            </div>

            {
                steps.map((step, index) => (
                    <div className="w-full text-center text-2xl my-5" key={index}>
                        {
                            step.count === 0
                                ? <Link to={ step.href } className="underline">{ step.label }</Link>
                                : <div className="line-through">{ step.label }</div>
                        }
                    </div>
                ))
            }
        </div>
    )
}

export default OnboardingBanner;