import type { GroceryItemType } from "../types";

interface Props {
  item: GroceryItemType;
  onClick: (id: number) => void;
}

export default function GroceryItem({ item, onClick }: Props) {
  return (
    <li
      onClick={() => onClick(item.id)}
      style={{
        padding: "0.5em",
        background: "#e9ecef",
        marginBottom: "0.5em",
        borderRadius: "4px",
        cursor: "pointer",
      }}
    >
      {item.item_name} ({item.quantity})
    </li>
  );
}