import React from "react";
import {useShopStore} from "./shop_store";

export function LegendItem({icon, description}) {
    return (
        <tr>
            <td className="p-1"><img className="" width="20px" src={icon} alt={description}/></td>
            <td className="p-1"><span> {description} </span></td>
        </tr>
    )
}

export function Legend() {
    const legend = useShopStore(state => state.legend);

    return <table>
        <tbody>
        {legend.map((item, i) => <LegendItem key={"legend_item"+i} icon={item.icon} description={item.description}/>)}
        </tbody>
    </table>
}