'use client'

import { memo } from "react";
import Image from "next/image";
import PlusIcon from "@/components/icons/PlusIcon";
import MinusIcon from "@/components/icons/MinusIcon";
import { useReceiptStore } from "@/zustand/receiptStore";
import { motion } from "framer-motion";
interface MenuItemProps {
  food: {
    id: number
    name: string;
    contains: string;
    price: string;
  };
}

const MenuItem = ({ food }: MenuItemProps) => {
  const quantity = useReceiptStore(state => state.items[food.id]?.quantity || 0);

  const increment = useReceiptStore(state => state.increment);
  const decrement = useReceiptStore(state => state.decrement);

  return (
    <div className="flex gap-4 w-full h-full">
      <Image
        className="rounded-xl w-28 h-28"
        src={"/assets/images/food-preview.png"}
        height={100}
        width={100}
        alt="Food image"
      />
      <div className="w-full inline-flex flex-col justify-between">
        <div>
          <div className="text-sm2 font-normal text-black dark:text-white">{food.name}</div>
          <div className="text-[#7F7F7F] text-xs leading-5 font-normal mt-2">
            {food.contains}
          </div>
        </div>
        <div className="inline-flex gap-2 justify-between w-full items-center">
          <span className="w-full text-sm mt-1" dir="ltr">{food.price} T</span>
          <motion.div
            whileTap={{ scale: 1.05 }}
            className="bg-background active:drop-shadow-xs max-w-[115px] rounded-md w-full h-8 inline-flex p-1 justify-between items-center gap-2"
          >
            {quantity <= 0 ? (
              <button
                onClick={() => increment(food.id)}
                className="inline-flex w-full justify-center items-center gap-2"
              >
                <PlusIcon />
                <div className="text-sm2 pt-0.5 font-normal text-foreground">افزودن</div>
              </button>
            ) : (
              <>
                <button
                  onClick={() => increment(food.id)}
                  className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2"
                >
                  <PlusIcon className="text-foreground" />
                </button>
                <motion.div
                  key={quantity}
                  initial={{ scale: 1 }}
                  animate={{ scale: [1.2, 0.95, 1] }}
                  transition={{ duration: 0.3 }}
                  className="text-sm2 pt-0.5 font-semibold"
                >
                  {quantity}
                </motion.div>


                <button
                  onClick={() => decrement(food.id)}
                  className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2"
                >
                  <MinusIcon className="text-foreground" />
                </button>
              </>
            )}
          </motion.div>
        </div>
      </div>
    </div>
  );
};

export default memo(MenuItem);