import React, { FC } from "react";
import { ScheduledUserDishType } from "@/types/ScheduledUserDishType";
import { UserType } from "@/types/UserType";
import { FilledScheduleType, ScheduleType } from "@/types/ScheduleType";

interface Props {
    schedule: ScheduleType|FilledScheduleType;
    user: UserType;
}

const ScheduleDayCardUserDish: FC<Props> = ({ schedule, user }) => {
    const getDish = (user: UserType) => {
        const scheduled_dishes = schedule.scheduled_user_dishes.filter((scheduled_user_dish: ScheduledUserDishType) => (
            scheduled_user_dish.user_dish?.user.id == user.id
        ))

        if (scheduled_dishes.length > 0) {
            return scheduled_dishes[0].user_dish.dish.name
        }

        return '/'
    }

    return (
        <div className="w-full flex background-secondary pb-1 rounded-2xl text-xl" key={ `user-${ user.id }` }>
            <div className="w-1/3 font-size-16 text-right pr-3">{ user.name } : </div>
            <div className="w-2/3 font-size-16">{ getDish(user) }</div>
        </div>
    );
};

export default ScheduleDayCardUserDish;