'use client';
import { useRef, useState } from 'react';
import * as motion from 'framer-motion/m';
import { AnimatePresence } from 'framer-motion';
import { useTranslations } from 'next-intl';
import { ShoppingCart, Check } from 'lucide-react';
import { useCartStore } from '@/store/cartStore';
import { useCartUI } from '@/components/frontend/cart/CartUIContext';
interface AddToCartButtonProduct {
id: string;
image: string; // a real ![]()
src — the grab-and-throw clone flies this
variantId?: string | null;
}
interface AddToCartButtonProps {
product: AddToCartButtonProduct;
quantity?: number;
className?: string;
onAdd?: () => void;
}
// Standalone add-to-cart control with the same grab-and-throw animation as
// ProductCard.tsx — both share useCartUI()'s fly()/cartIconRef rather than
// each needing a cartIconRef prop threaded down manually, since the cart
// icon (registered once, in Header.tsx) is the same target for every
// instance anywhere in the tree.
export default function AddToCartButton({
product,
quantity = 1,
className = '',
onAdd,
}: AddToCartButtonProps) {
const { addToCart, loading } = useCartStore();
const { fly } = useCartUI();
const t = useTranslations('ProductCard');
const tCart = useTranslations('Cart');
const [added, setAdded] = useState(false);
const [isFlying, setIsFlying] = useState(false);
const [justPicked, setJustPicked] = useState(false);
const imageRef = useRef(null);
const handleAdd = async () => {
if (isFlying) return; // guard double-fires while a throw is in flight
setJustPicked(true);
setTimeout(() => setJustPicked(false), 300);
if (imageRef.current) {
setIsFlying(true);
fly(imageRef.current, product.image, () => setIsFlying(false));
}
await addToCart(product.id, product.variantId ?? null, quantity, {
success: tCart('addedToCart'),
failed: tCart('addToCartFailed'),
networkError: tCart('networkError'),
});
onAdd?.();
setAdded(true);
setTimeout(() => setAdded(false), 1500);
};
return (
);
}