'use client';

import React from 'react';

interface PageHeaderProps {
  icon: React.ElementType;
  title: string;
  description?: string;
  action?: React.ReactNode;
  iconGradient?: string;
  iconBorder?: string;
}

/**
 * Page header component with icon, title, description, and optional action.
 * Used at the top of pages for consistent page titling.
 */
export default function PageHeader({ 
  icon: Icon, 
  title, 
  description,
  action,
  iconGradient = 'from-iron-gray to-deep-graphite',
  iconBorder = 'border-charcoal-outline',
}: PageHeaderProps) {
  return (
    <div className="mb-8">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-white flex items-center gap-4">
            <div className={`p-3 rounded-xl bg-gradient-to-br ${iconGradient} border ${iconBorder}`}>
              <Icon className="w-7 h-7 text-gray-300" />
            </div>
            {title}
          </h1>
          {description && (
            <p className="text-gray-400 mt-2 ml-16">{description}</p>
          )}
        </div>
        {action}
      </div>
    </div>
  );
}