'use client';
/**
* =============================================================================
* CART DRAWER (SLIDE-IN BASKET PANEL)
* =============================================================================
*
* This is the visual "basket" that slides in from the right when the user
* clicks the cart icon in the navbar or the "View Cart" toast action.
*
* KEY DESIGN CHOICES:
* - Fixed position, full-height, max-w-md (beautiful on both mobile and desktop)
* - Backdrop click closes it (standard mobile pattern)
* - z-[990] sits above almost everything (including the sticky category nav) (below mobile menu)
* - All cart mutations go through the context — this component is "dumb" UI only
*
* THE ORDERING FLOW (very important for restaurant context):
* Instead of a traditional Stripe checkout, we generate a pre-filled WhatsApp
* message containing every line item + quantities + grand total.
* This matches the restaurant's current real-world ordering process.
* The number 46709864995 is the same one used in the homepage reservation form.
*
* FUTURE ENHANCEMENTS (documented here so nothing is forgotten):
* - Add "Special requests" textarea per order
* - Show estimated preparation time
* - Allow "Order for later" date/time picker
* - Split "Pickup" vs "Delivery" with different messaging
* - After WhatsApp opens, optionally clear the cart (or keep it — current choice)
*/
import { useCart } from './CartContext';
import Link from 'next/link';
export default function CartDrawer() {
const {
items,
isOpen,
closeCart,
totalPrice,
removeFromCart,
updateQuantity,
clearCart
} = useCart();
/**
* WHATSAPP DEEP LINK ORDERING
*
* Builds a human-readable, copy-paste friendly message that the restaurant staff
* can immediately understand and action.
*
* The format deliberately mirrors how the restaurant currently receives orders
* over the phone or via Instagram DMs.
*/
const orderViaWhatsApp = () => {
if (items.length === 0) return;
const lines = items
.map((item) => `${item.quantity} × ${item.name} — ${item.price * item.quantity} kr`)
.join('\n');
const message =
`Hello Shahi Kitchen 👋
I would like to place an order:
${lines}
Total: ${totalPrice} kr
Thank you!`;
const encoded = encodeURIComponent(message);
// This is the same WhatsApp business number used for table reservations on the homepage
window.open(`https://wa.me/46709864995?text=${encoded}`, '_blank');
};
// Guard clause — drawer only renders when explicitly opened via context
if (!isOpen) return null;
return (
<>
{/* SEMI-TRANSPARENT BACKDROP */}
{/* Clicking anywhere outside the drawer closes it (standard mobile pattern) */}
{/* THE ACTUAL DRAWER — slides in from right */}
{/* z-[990] ensures it sits above sticky nav, category pills, and most other UI (below mobile menu) */}
{/* HEADER — Title + item count + quick clear + close button */}