import { Button } from "@repo/shadcn-ui/components";
import { cn } from "@repo/shadcn-ui/lib/utils";
import { ChevronLeftIcon } from "lucide-react";
import type { ReactNode } from "react";

interface PageHeaderProps {
  backIcon?: ReactNode;
  title: ReactNode;
  description?: ReactNode;
  status?: string;
  rightSlot?: ReactNode;

  className?: string;
}

export function PageHeader({
  backIcon,
  title,
  description,
  rightSlot,
  className,
}: PageHeaderProps) {
  return (
    <div className={cn("pt-6 pb-6 lg:flex lg:items-center lg:justify-between", className)}>
      {/* Lado izquierdo */}
      <div className='min-w-0 flex-1'>
        <div className='flex items-start gap-4'>
          {backIcon && (
            <Button
              variant='ghost'
              size='icon'
              className='cursor-pointer'
              onClick={() => window.history.back()}
            >
              <ChevronLeftIcon className='size-5' />
            </Button>
          )}

          <div>
            <h2 className='h-8 text-xl font-semibold text-foreground sm:truncate sm:tracking-tight'>
              {title}
            </h2>
            {description && <p className='text-sm text-muted-foreground'>{description}</p>}
          </div>
        </div>
      </div>

      {/* Lado derecho parametrizable */}
      <div className='mt-4 flex lg:mt-0 lg:ml-4'>{rightSlot}</div>
    </div>
  );
}
