'use client';

import { ReactNode } from "react";
import { LucideIcon } from "lucide-react";

interface PageHeaderProps {
  title: string;
  description?: string;
  actions?: ReactNode;
  icon?: LucideIcon;
  versionBadge?: ReactNode;
}

export function PageHeader({ title, description, actions, icon: Icon, versionBadge }: PageHeaderProps) {
  return (
    <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
      <div className="flex items-start gap-3">
        {Icon && (
          <div className="p-2 bg-primary/10 rounded-lg hidden md:block">
            <Icon className="w-6 h-6 text-primary" />
          </div>
        )}
        <div>
          <div className="flex items-center gap-2">
            <h1 className="text-xl md:text-2xl">{title}</h1>
            {versionBadge}
          </div>
          {description && (
            <p className="text-sm text-muted-foreground mt-1">
              {description}
            </p>
          )}
        </div>
      </div>
      <div className="flex gap-2 flex-wrap items-center">
        {actions}
      </div>
    </div>
  );
}