import { createFileRoute, useNavigate, useSearch } from '@tanstack/react-router'
import { p, MyButton } from 'web-components'
import { Package } from 'lucide-react'

export const Route = createFileRoute('/home/order-success')({
  component: OrderSuccessPage,
  validateSearch: (search: Record<string, string>) => ({
    orderId: search.orderId || '',
    totalAmount: search.totalAmount || '0',
  }),
})

function OrderSuccessPage() {
  const navigate = useNavigate()
  const { orderId, totalAmount } = Route.useSearch()

  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-green-50 p-6">
      <div className="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-green-100">
        <Package className="h-10 w-10 text-green-600" />
      </div>
      <p className="font-bold mb-2 text-2xl text-gray-900">
        Order Placed!
      </p>
      <p className="mb-1 text-gray-600">
        Order ID: #{orderId}
      </p>
      <p className="mb-8 text-gray-600">
        Total: ₹{totalAmount}
      </p>
      <MyButton
        textContent="Continue Shopping"
        onClick={() => navigate({ to: '/home' })}
        className="mb-3 bg-brand-500 text-white"
      />
      <MyButton
        textContent="View My Orders"
        onClick={() => navigate({ to: '/me/orders' })}
        fillColor="gray"
        className="bg-gray-100 text-gray-700"
      />
    </div>
  )
}
