Cart Summary (Drawerless)

import { CartSummaryDrawerless } from '@/components/ui/cart-summary-drawerless'

'use client'

import { useMemo, useState } from 'react'
import { CartSummaryDrawerless } from '@/components/ui/cart-summary-drawerless'

const CATALOG: Record<
  string,
  { name: string; variant: string; unitCents: number }
> = {
  jacket: {
    name: 'Field Jacket 02',
    variant: 'Olive · M',
    unitCents: 18900,
  },
  crew: {
    name: 'Merino Crew',
    variant: 'Charcoal · L',
    unitCents: 7800,
  },
  belt: {
    name: 'Saddle Belt',
    variant: 'Tan · 34',
    unitCents: 6200,
  },
}

function formatMoney(cents: number) {
  return new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
    minimumFractionDigits: cents % 100 === 0 ? 0 : 2,
  }).format(cents / 100)
}

export default function CartSummaryDrawerlessDemo() {
  const [qty, setQty] = useState<Record<string, number>>({
    jacket: 1,
    crew: 2,
    belt: 1,
  })

  const { items, subtotal, tax, total } = useMemo(() => {
    const nextItems = Object.entries(qty).map(([id, q]) => {
      const cat = CATALOG[id]!
      return {
        id,
        name: cat.name,
        variant: cat.variant,
        qty: q,
        linePrice: formatMoney(cat.unitCents * q),
      }
    })
    const sub = Object.entries(qty).reduce(
      (sum, [id, q]) => sum + CATALOG[id]!.unitCents * q,
      0
    )
    const promoCents = 2400
    const afterPromo = Math.max(0, sub - promoCents)
    const taxCents = Math.round(afterPromo * 0.1)
    return {
      items: nextItems,
      subtotal: formatMoney(sub),
      tax: `${formatMoney(taxCents)} GST`,
      total: formatMoney(afterPromo + taxCents),
    }
  }, [qty])

  return (
    <div className="mx-auto flex w-full max-w-md justify-center px-4 py-10 sm:px-6 sm:py-14">
      <CartSummaryDrawerless
        heading="Order summary"
        items={items}
        onQtyChange={(id, next) =>
          setQty((prev) => ({
            ...prev,
            [id]: next,
          }))
        }
        promo={{ code: 'WELCOME10', amount: '-$24' }}
        subtotal={subtotal}
        shipping="Free"
        tax={tax}
        total={total}
        note="Duties calculated at checkout · free returns within 30 days"
      />
    </div>
  )
}