import LocalizedClientLink from "@modules/common/components/localized-client-link"

export default function CheckoutLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="w-full bg-gray-50 min-h-screen">
      {/* Minimal checkout header */}
      <header className="bg-white border-b border-gray-100">
        <div className="max-w-5xl mx-auto px-4 sm:px-6 h-14 flex items-center justify-between">
          <LocalizedClientLink
            href="/cart"
            className="text-sm text-gray-400 hover:text-gray-600 flex items-center gap-1.5 transition-colors"
            data-testid="back-to-cart-link"
          >
            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
              <path d="m15 18-6-6 6-6"/>
            </svg>
            <span className="hidden sm:inline">Back to cart</span>
            <span className="sm:hidden">Back</span>
          </LocalizedClientLink>

          <LocalizedClientLink href="/" data-testid="store-link">
            <img src="/images/totti-logo.png" alt="Totti" className="h-7 w-auto" />
          </LocalizedClientLink>

          {/* Secure badge */}
          <div className="flex items-center gap-1.5 text-xs text-gray-400">
            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
            </svg>
            <span className="hidden sm:inline">Secure checkout</span>
          </div>
        </div>

        {/* Progress indicator */}
        <div className="bg-gray-50 border-t border-gray-100">
          <div className="max-w-5xl mx-auto px-4 sm:px-6 py-2 flex items-center gap-2 text-xs">
            <span className="text-[#7B4A2A] font-bold">Delivery</span>
            <div className="flex-1 h-px bg-gray-200 max-w-8" />
            <span className="text-gray-400">Shipping</span>
            <div className="flex-1 h-px bg-gray-200 max-w-8" />
            <span className="text-gray-400">Payment</span>
            <div className="flex-1 h-px bg-gray-200 max-w-8" />
            <span className="text-gray-400">Confirm</span>
          </div>
        </div>
      </header>

      <div data-testid="checkout-container">{children}</div>
    </div>
  )
}