'use client';

import { useTranslation } from "@/lib/hooks/useTranslation";
import Link from "next/link";
import { BoxOption } from "../BuildBoxCustomizeClient";
import { RedirectIfEmptyBox } from "../RedirectIfEmptyBox";
import { BuildBoxCustomizeClientWithTranslation } from "./BuildBoxCustomizeClientWithTranslation";
import { BuildBoxLayout } from "./BuildBoxLayout";

interface BuildBoxCustomizePageContentProps {
  boxes: BoxOption[];
}

export function BuildBoxCustomizePageContent({ boxes }: BuildBoxCustomizePageContentProps) {
  const { t } = useTranslation();
  
  // Back button component
  const BackButton = (
    <Link href="/build-box" className="inline-flex items-center text-sm text-gray-600">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-1">
        <polyline points="15 18 9 12 15 6" />
      </svg>
      {t('buildBox.customize.back')}
    </Link>
  );

  // If no boxes, display a message
  if (!boxes || boxes.length === 0) {
    return (
      <BuildBoxLayout title={t('buildBox.customize.title')} step={2} backButton={BackButton}>
        <div className="text-center py-8">
          <p>{t('buildBox.customize.emptyMessage')}</p>
        </div>
      </BuildBoxLayout>
    );
  }

  return (
    <BuildBoxLayout title={t('buildBox.customize.title')} step={2} backButton={BackButton}>
      {/* Client component to check if box has items and redirect if empty */}
      <RedirectIfEmptyBox />
      
      {/* Boxes Grid - Client Component */}
      <BuildBoxCustomizeClientWithTranslation boxes={boxes} />
    </BuildBoxLayout>
  );
}