"use client";

import React from "react";
import { RefreshCw } from "lucide-react";
import { Button } from "@micprotocol/ui";

export function AdminHeader({
  title,
  subtitle,
  onRefresh,
  refreshing,
  actions,
}: {
  title: string;
  subtitle?: string;
  onRefresh?: () => void;
  refreshing?: boolean;
  actions?: React.ReactNode;
}) {
  return (
    <header className="flex items-center justify-between gap-4 border-b border-[var(--border-color)] bg-[var(--bg-secondary)] px-6 py-4">
      <div className="min-w-0">
        <h1 className="font-display text-xl font-semibold text-[var(--text-primary)]">{title}</h1>
        {subtitle ? (
          <p className="mt-0.5 truncate text-sm text-[var(--text-secondary)]">{subtitle}</p>
        ) : null}
      </div>
      <div className="flex items-center gap-2">
        {actions}
        {onRefresh ? (
          <Button
            variant="ghost"
            size="sm"
            onClick={onRefresh}
            disabled={refreshing}
            title="Refresh data"
            className="text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)]"
          >
            <RefreshCw className={refreshing ? "animate-spin" : ""} />
          </Button>
        ) : null}
      </div>
    </header>
  );
}