import { Button } from '@repo/shadcn-ui/components';
import { cn } from '@repo/shadcn-ui/lib/utils';
import { ChevronLeftIcon } from 'lucide-react';
// 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;

  className?: string;
}

export function PageHeader({ icon, title, description, status, rightSlot, className }: PageHeaderProps) {
  return (
    <div className={cn("border-b bg-card -px-4 pt-4", className)}>
      <div className="mx-auto px-6 py-4">
        <div className='flex items-center justify-between'>
          {/* Lado izquierdo */}
          <div className='flex items-center gap-4'>
            <Button variant="ghost" size="icon" className="cursor-pointer" onClick={() => window.history.back()}>
              <ChevronLeftIcon className="size-5" />
            </Button>
            {icon && <div className='shrink-0'>{icon}</div>}

            <div>
              <div className='flex items-center gap-3'>
                <h1 className='text-xl 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>
  );
}