---
import Layout from '../layouts/Layout.astro';
import Header from '../components/layout/Header';
import Footer from '../components/layout/Footer';
import CartItems from '../components/cart/CartItems';
import CartSummary from '../components/cart/CartSummary';
import CartDrawer from '../components/cart/CartDrawer';
import CartBadge from '../components/cart/CartBadge';
---

<Layout title="ตะกร้าสินค้า">
  <Header />
  
  <div class="container mx-auto px-4 py-8">
    <h1 class="text-2xl font-bold mb-8">ตะกร้าสินค้า</h1>
    
    <div class="grid lg:grid-cols-3 gap-8">
      <!-- Cart Items -->
      <div class="lg:col-span-2">
        <div class="bg-white rounded-xl shadow-sm">
          <CartItems client:load />
        </div>
      </div>
      
      <!-- Summary -->
      <div>
        <div class="bg-white rounded-xl shadow-sm p-6 sticky top-24">
          <h2 class="font-bold text-lg mb-4">สรุปคำสั่งซื้อ</h2>
          <CartSummary client:load />
          
          <a 
            href="/checkout" 
            class="mt-6 w-full bg-blue-600 text-white py-3 px-4 rounded-lg text-center block hover:bg-blue-700 transition-colors font-medium"
          >
            ดำเนินการชำระเงิน
          </a>
          
          <a 
            href="/products" 
            class="mt-3 w-full border border-gray-300 py-3 px-4 rounded-lg text-center block hover:bg-gray-50 transition-colors text-gray-700"
          >
            เลือกซื้อสินค้าเพิ่มเติม
          </a>
        </div>
      </div>
    </div>
  </div>
  
  <Footer />
  <CartDrawer client:load />
  <CartBadge client:load />
</Layout>