"use client";

import { ReactNode } from "react";
import Button from "./Button";

interface PageHeaderProps {
    title: string;
    description?: string;
    primaryAction?: {
        label: string;
        onClick?: () => void;
        icon?: ReactNode;
        isLoading?: boolean;
    };
    secondaryAction?: {
        label: string;
        onClick?: () => void;
        icon?: ReactNode;
    };
    children?: ReactNode;
}

export default function PageHeader({
    title,
    description,
    primaryAction,
    secondaryAction,
    children
}: PageHeaderProps) {
    return (
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
            <div className="flex-1 min-w-0">
                <h1 className="text-2xl font-bold text-zinc-900 dark:text-white tracking-tight truncate">
                    {title}
                </h1>
                {description && (
                    <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
                        {description}
                    </p>
                )}
            </div>

            <div className="flex items-center gap-3">
                {secondaryAction && (
                    <Button
                        variant="outline"
                        onClick={secondaryAction.onClick}
                        className="bg-white dark:bg-zinc-900"
                    >
                        {secondaryAction.icon && (
                            <span className="mr-2">{secondaryAction.icon}</span>
                        )}
                        {secondaryAction.label}
                    </Button>
                )}

                {primaryAction && (
                    <Button
                        variant="primary"
                        onClick={primaryAction.onClick}
                        isLoading={primaryAction.isLoading}
                        className="shadow-lg shadow-brand-500/20"
                        style={{ background: 'var(--gradient)' }}
                    >
                        {primaryAction.icon && !primaryAction.isLoading && (
                            <span className="mr-2">{primaryAction.icon}</span>
                        )}
                        {primaryAction.label}
                    </Button>
                )}

                {children}
            </div>
        </div>
    );
}