'use client';

import type { ReactNode } from 'react';

import { cn } from '@/lib/utils';

/**
 * Wrapper for entity detail pages (clients, yachts, companies, etc.). Renders:
 *   - sticky compact header (entity name + status pill)
 *   - the children (existing tab dropdown selector + tab body)
 *   - optional sticky bottom action shelf, pinned above the bottom tab bar on
 *     mobile (`pb-[calc(56px+env(safe-area-inset-bottom))]` content padding).
 */
export function DetailPageShell({
  entityName,
  status,
  children,
  bottomActions,
  className,
}: {
  entityName: string;
  status?: ReactNode;
  children: ReactNode;
  bottomActions?: ReactNode;
  className?: string;
}) {
  return (
    <div className={cn('flex flex-col min-h-full', className)}>
      <div className="sticky top-0 z-10 bg-background/95 backdrop-blur border-b border-border px-4 py-3 sm:px-6">
        <div className="flex items-center gap-3 min-w-0">
          <h2 className="truncate text-lg font-semibold text-foreground">{entityName}</h2>
          {status ? <div className="ml-auto shrink-0">{status}</div> : null}
        </div>
      </div>

      <div className={cn('flex-1 px-4 py-4 sm:px-6 sm:py-6', bottomActions && 'pb-24 sm:pb-6')}>
        {children}
      </div>

      {bottomActions ? (
        <div
          className={cn(
            'sm:hidden',
            'fixed inset-x-0 bottom-[calc(56px+env(safe-area-inset-bottom))] z-30',
            'border-t border-border bg-background/95 backdrop-blur px-4 py-3',
            'flex items-center gap-2',
          )}
        >
          {bottomActions}
        </div>
      ) : null}
    </div>
  );
}