'use client';

import { Section } from "@/components/ui/Section";
import { Heading } from "@/components/ui/Typography";
import { useEffect, useState } from "react";
import { BuildBoxSidebar } from "./BuildBoxSidebar";

export function ClientSidebarWrapper() {
  // Use state to prevent hydration errors
  const [isClient, setIsClient] = useState(false);
  
  // After component mounts, set isClient to true
  useEffect(() => {
    setIsClient(true);
  }, []);
  
  // On the server, or during hydration, return a placeholder with the same dimensions
  if (!isClient) {
    return (
      <div className="h-full flex flex-col">
        <Section spacing="xs" className="border-b">
          <Heading level={3} className="text-center">Your box</Heading>
        </Section>
        <div className="flex-1 p-4">
          {/* Placeholder content to match dimensions */}
          <div className="text-center py-8 text-gray-500">
            <p>Loading...</p>
          </div>
        </div>
        <div className="border-t p-4">
          <div className="flex justify-between mb-4">
            <p className="font-medium">Cijena boxa</p>
            <p className="font-medium">$0.00</p>
          </div>
          
          <button
            className="w-full py-3 bg-gray-200 text-gray-500 rounded cursor-not-allowed"
            disabled
          >
            Loading...
          </button>
        </div>
      </div>
    );
  }
  
  // On the client, after hydration, render the actual sidebar
  return <BuildBoxSidebar />;
}