import {DishType} from "~/types/DishType";

import {PencilIcon, TrashIcon} from '@heroicons/react/24/solid'
import { Link } from "react-router";
import useRoutes from "~/hooks/useRoutes";
import {UserType} from "~/types/UserType";
import Card from "~/components/layout/Card";

const Dish = ({ dish }: { dish: DishType}) => {
    const routes = useRoutes();

    return (
        <Card>
            <div className="flex-1 flex items-center">
                <p className="text-bold text-xl font-bold">{ dish.name }</p>
                <span className="mx-2"></span>
                {
                    dish.users.map((user: UserType) => (
                        <div key={user.id} className="text-accent-yellow mx-1">{user.name.slice(0, 1)}</div>
                    ))
                }
            </div>
            <div className="flex-none flex gap-2">
                <Link to={routes.dish.edit(dish)}>
                    <div className="border border-foreground p-2 rounded">
                        <PencilIcon width="14" />
                    </div>
                </Link>
                <Link to={routes.dish.delete(dish)}>
                    <div className="border border-red-500 p-2 rounded">
                        <TrashIcon width="14" className="text-red-500" />
                    </div>
                </Link>
            </div>
        </Card>
    )
}

export default Dish