'use client';

/**
 * EmptyRowHeading — placeholder rendered by deal-row Components when they have
 * no data AND are being rendered in the admin preview mode. Lets admins see
 * the row's position/order even when no deals match the query.
 *
 * On the public site (non-preview), deal-row Components return `null` for empty
 * data so visitors don't see dead headings.
 */

import { usePreviewMode } from '@/features/page-organized-home/PreviewContext';
import { useT } from '@/lib/i18n/react';

export function useShouldRenderEmptyRow(): boolean {
  return usePreviewMode();
}

export function EmptyRowHeading({ title }: { title: string }) {
  const t = useT('page_organizer');
  return (
    <section>
      <div className="flex items-center justify-between px-4 pb-1 pt-4">
        <h2 className="text-text-primary text-base font-bold">{title}</h2>
        <span className="text-text-muted text-xs">—</span>
      </div>
      <div className="border-border-subtle mx-4 mb-2 rounded-md border border-dashed px-4 py-6 text-center">
        <p className="text-text-muted text-sm">
          {/* Generic "no content" hint — preview-only, visible to admin only */}
          {t('empty_row_hint')}
        </p>
      </div>
    </section>
  );
}