import React from 'react';

/**
 * GradientHeader component for page headers with gradient background
 * and navigation elements.
 * 
 * @param {Object} props - Component props
 * @param {string} props.title - Header title
 * @param {boolean} props.showBackButton - Whether to show back button
 * @param {Function} props.onBack - Back button click handler
 * @param {ReactNode} props.rightContent - Content to display on the right side
 * @returns {JSX.Element} GradientHeader component
 */
const GradientHeader = ({ title, showBackButton = false, onBack, rightContent }) => {
  return (
    <header className="bg-gradient-to-r from-green-50 to-blue-50 p-4 relative">
      <div className="flex items-center justify-between">
        {showBackButton && (
          <button 
            onClick={onBack} 
            className="p-2 rounded-full bg-white/30 backdrop-blur-sm"
            aria-label="返回"
          >
            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-gray-700" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
            </svg>
          </button>
        )}
        <h1 className={`text-xl font-medium text-center ${showBackButton ? 'flex-1' : ''}`}>
          {title}
        </h1>
        {rightContent && <div>{rightContent}</div>}
      </div>
    </header>
  );
};

export default GradientHeader;