import React from 'react';
import { Card, CardContent } from '@/components/ui/Card';

interface PageHeaderProps {
  title: string;
  description: string;
  /** Le contenu optionnel à afficher sur la droite (Bouton, Badge, etc.) */
  children?: React.ReactNode; 
}

export const PageHeader: React.FC<PageHeaderProps> = ({ title, description, children }) => {
  return (
    <Card>
      <CardContent className="p-6 sm:px-8 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <div>
          <h1 className="text-2xl font-bold text-slate-900 tracking-tight">
            {title}
          </h1>
          <p className="text-sm text-slate-500 mt-1">
            {description}
          </p>
        </div>
        
        {/* S'il y a des actions passées en "children", on les affiche ici */}
        {children && (
          <div className="shrink-0">
            {children}
          </div>
        )}
      </CardContent>
    </Card>
  );
};

export default PageHeader;