// features/common/components/page-header.tsx
import type { ReactNode } from "react";
import { CustomerInvoiceStatusBadge } from "./customer-invoice-status-badge";

interface PageHeaderProps {
  /** Icono que aparece a la izquierda del título */
  icon?: ReactNode;
  /** Contenido del título (texto plano o nodo complejo) */
  title: ReactNode;
  /** Descripción secundaria debajo del título */
  description?: ReactNode;
  /** Estado opcional (ej. "draft", "paid") */
  status?: string;
  /** Contenido del lado derecho (botones, menús, etc.) */
  rightSlot?: ReactNode;
}

export function PageHeader({ icon, title, description, status, rightSlot }: PageHeaderProps) {
  return (
    <div className='border-b bg-card -px-4'>
      <div className='mx-auto w-full px-6 pt-2 pb-8'>
        <div className='flex items-center justify-between'>
          {/* Lado izquierdo */}
          <div className='flex items-center gap-3'>
            {icon && <div className='shrink-0'>{icon}</div>}
            <div>
              <div className='flex items-center gap-3'>
                <h1 className='text-2xl font-semibold text-foreground'>{title}</h1>
                {status && <CustomerInvoiceStatusBadge status={status} />}
              </div>
              {description && <p className='text-sm text-muted-foreground'>{description}</p>}
            </div>
          </div>

          {/* Lado derecho parametrizable */}
          {rightSlot && <div>{rightSlot}</div>}
        </div>
      </div>
    </div>
  );
}