import React, {ReactNode} from "react";
import {LucideIcon} from "lucide-react";
import Badge from "@/components/ui/Badge";
import IconContainer from "@/components/ui/IconContainer";

interface SectionHeaderProps {
    icon?: LucideIcon;
    title: string;
    badge?: string;
    description?: string;
    actions?: ReactNode;
}

export default function SectionHeader(
    {
        icon,
        title,
        badge,
        description,
        actions,
    }: SectionHeaderProps) {
    return (
        <div className="shrink-0">
            <div className="flex justify-between items-center">
                <div className="flex-1">
                    <h2 className="text-xl text-text-primary font-bold flex items-center gap-3 flex-wrap">
                        {icon && <IconContainer icon={icon} size="sm"/>}
                        <span className="tracking-wide">{title}</span>
                        {badge && <Badge>{badge}</Badge>}
                    </h2>
                    {description && (
                        <p className="text-text-secondary text-xs mt-2 ml-13">{description}</p>
                    )}
                </div>
                {actions && (
                    <div className="flex items-center gap-2">
                        {actions}
                    </div>
                )}
            </div>
        </div>
    );
}