import React, { useState } from 'react';
import { RefreshCw } from 'lucide-react';
import { useLearnerHub } from '../LearnerHubContext';

interface WizardHeaderProps {
  title: string;
}

export const WizardHeader: React.FC<WizardHeaderProps> = ({ title }) => {
  const { refreshAllSteps } = useLearnerHub();
  const [isRefreshing, setIsRefreshing] = useState(false);

  const handleRefresh = async () => {
    if (isRefreshing) return;
    setIsRefreshing(true);
    try {
      await refreshAllSteps();
    } catch (error) {
      console.error('Failed to refresh all steps:', error);
    } finally {
      setIsRefreshing(false);
    }
  };

  const handleWheel = (e: React.WheelEvent) => {
    e.stopPropagation();
  };

  return (
    <div
      className="border-b border-border bg-secondary px-6"
      onWheel={handleWheel}
      style={{ WebkitAppRegion: 'drag' } as React.CSSProperties}
    >
      <div className="flex items-center justify-between py-2">
        <div className="w-8" />
        <h1
          className="text-base font-semibold text-foreground select-none"
          style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
        >
          {title}
        </h1>
        <button
          onClick={handleRefresh}
          disabled={isRefreshing}
          className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
          style={{ WebkitAppRegion: 'no-drag' } as React.CSSProperties}
          title="Refresh all steps"
        >
          <RefreshCw className={`h-3.5 w-3.5 ${isRefreshing ? 'animate-spin' : ''}`} />
          <span>Refresh All</span>
        </button>
      </div>
    </div>
  );
};
