"use client"

import { useCart } from "@/hooks/useCart"
import { formatPrice } from "@/lib/formatters"
import { TAX_RATE, FREE_SHIPPING_THRESHOLD } from "@/lib/constants"
import { Button } from "@/components/ui/Button"

export function CartSummary() {
  const { cart } = useCart()
  const subtotal = cart.total
  const tax = subtotal * TAX_RATE
  const shipping = subtotal >= FREE_SHIPPING_THRESHOLD ? 0 : 5.99
  const total = subtotal + tax + shipping

  return (
    <div className="rounded-xl border border-white/10 bg-surface p-6">
      <h2 className="mb-4 text-lg font-semibold text-white">Order Summary</h2>

      <div className="space-y-2 text-sm">
        <div className="flex justify-between">
          <span className="text-silver">Subtotal</span>
          <span className="text-white">{formatPrice(subtotal)}</span>
        </div>
        <div className="flex justify-between">
          <span className="text-silver">Tax (8%)</span>
          <span className="text-white">{formatPrice(tax)}</span>
        </div>
        <div className="flex justify-between">
          <span className="text-silver">Shipping</span>
          <span className={shipping === 0 ? "text-emerald-400" : "text-white"}>
            {shipping === 0 ? "Free" : formatPrice(shipping)}
          </span>
        </div>
        <div className="flex justify-between border-t border-white/10 pt-2 text-base font-semibold">
          <span className="text-white">Total</span>
          <span className="text-white">{formatPrice(total)}</span>
        </div>
      </div>

      <Button className="mt-6 w-full" size="lg">
        Proceed to Checkout
      </Button>
    </div>
  )
}