import React, { FC } from "react";
import { DishType } from "@/types/DishType";
import { UserType } from "@/types/UserType";
import UserDishCard from "@/components/features/dishes/UserDishCard";
import SectionTitle from "@/components/ui/SectionTitle";
import AddUserToDishForm from "@/components/features/dishes/AddUserToDishForm";

interface Props {
    dish: DishType;
    reloadDish: () => void;
}

const SyncUsersForm: FC<Props> = ({ dish, reloadDish }) => {
    return (
        <div className="my-2 w-full flex flex-col">
            <SectionTitle className="mt-2">Users</SectionTitle>

            <AddUserToDishForm dish={dish} reloadDish={reloadDish} />

            {dish.users.map((user: UserType) => (
                <UserDishCard
                    key={user.id}
                    user={user}
                    dish={dish}
                    reloadDish={reloadDish}
                />
            ))}
        </div>
    );
};

export default SyncUsersForm;