'use client';

import React from 'react';

export default function StageHeader({ stage, currentOrgStage, isExpanded, onToggle }) {
  const isLocked = stage.id > currentOrgStage;
  const isPast = stage.id < currentOrgStage;
  const isCurrent = stage.id === currentOrgStage;

  return (
    <div className={`border rounded-lg mb-4 overflow-hidden ${isLocked ? 'opacity-50' : ''}`}>
      <button
        type="button"
        disabled={isLocked}
        onClick={onToggle}
        className={`w-full flex items-center justify-between p-4 text-left font-semibold ${
          isCurrent ? 'bg-blue-50 text-blue-700' : 'bg-gray-50'
        } ${isLocked ? 'cursor-not-allowed' : 'hover:bg-gray-100'}`}
      >
        <div className="flex items-center space-x-3">
          <span className={`w-8 h-8 flex items-center justify-center rounded-full text-sm ${
            isPast ? 'bg-green-100 text-green-700' :
            isCurrent ? 'bg-blue-600 text-white' :
            'bg-gray-200 text-gray-500'
          }`}>
            {isPast ? '✓' : stage.id}
          </span>
          <span>{stage.label}</span>
        </div>
        {!isLocked && (
          <span className="text-gray-400">
            {isExpanded ? '−' : '+'}
          </span>
        )}
      </button>
    </div>
  );
}