import React from "react";
import { cn } from "@/lib/utils";

interface PageHeaderProps {
  title: string;
  description?: string;
  badge?: React.ReactNode;
  actions?: React.ReactNode;
  action?: React.ReactNode;
  icon?: React.ComponentType<{ className?: string }> | React.ReactNode;
  className?: string;
}

export const PageHeader: React.FC<PageHeaderProps> = ({
  title,
  description,
  badge,
  actions,
  action,
  icon: IconProp,
  className,
}) => {
  const renderedAction = actions || action;

  const renderIcon = () => {
    if (!IconProp) return null;
    if (React.isValidElement(IconProp)) {
      return IconProp;
    }
    const IconComponent = IconProp as React.ComponentType<{ className?: string }>;
    return (
      <div className="w-10 h-10 rounded-xl bg-blue-50 border border-blue-100 flex items-center justify-center text-brand-blue shrink-0 shadow-sm">
        <IconComponent className="w-5 h-5" />
      </div>
    );
  };

  return (
    <div
      className={cn(
        "flex flex-col gap-3 pb-5 border-b border-brand-border sm:flex-row sm:items-center sm:justify-between",
        className
      )}
    >
      <div className="flex items-start gap-3">
        {renderIcon()}
        <div className="space-y-1">
          <div className="flex items-center gap-3">
            <h1 className="text-xl sm:text-2xl font-bold tracking-tight text-brand-text">
              {title}
            </h1>
            {badge}
          </div>
          {description && (
            <p className="text-sm text-brand-secondary leading-relaxed">
              {description}
            </p>
          )}
        </div>
      </div>

      {renderedAction && (
        <div className="flex items-center gap-2 sm:gap-3 flex-nowrap shrink-0">{renderedAction}</div>
      )}
    </div>
  );
};