'use client';

import { Heading } from "@/components/ui/Typography";
import { useTranslation } from "@/lib/hooks/useTranslation";
import { useEffect, useState } from "react";
import { BuildBoxSidebarWithTranslation } from "./BuildBoxSidebarWithTranslation";

interface ClientSidebarWrapperWithTranslationProps {
  isMobile?: boolean;
}

export function ClientSidebarWrapperWithTranslation({ isMobile = false }: ClientSidebarWrapperWithTranslationProps) {
  const { t } = useTranslation();
  // 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">
        {!isMobile && (
          <div className="p-4 pt-8 pb-4 border-b">
            <Heading level={3} className="text-center">{t('buildBox.sidebar.title')}</Heading>
          </div>
        )}
        <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">{t('buildBox.sidebar.boxPrice')}</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 <BuildBoxSidebarWithTranslation isMobile={isMobile} />;
}