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";


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("py-4", className)}>
      <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>
            </div>
            {description && <p className='text-sm text-muted-foreground'>{description}</p>}
          </div>
        </div>

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

    </div>
  );
}
