import React from 'react'
import useRenderTracker from '../../../hooks/useRenderTracker';


interface ErrorMessageProps {
  errorMessage?: string;
  onRetry?: () => void;
  onDismiss?: () => void;
}

const ErrorMessage: React.FC<ErrorMessageProps> = ({ 
  onRetry = () => console.log("Retry clicked"),
  onDismiss = () => console.log("Dismiss clicked")
}) => {
  
  useRenderTracker('ErrorMessage', {
    onRetry,
    onDismiss,
  });

  return (
    <div className="w-full max-w-md px-4 py-3 my-6 items-center bg-red-500/5 backdrop-blur-sm rounded-xl shadow-sm dark:shadow-lg overflow-hidden border border-red-500/10">
      <div className="flex items-center justify-between">
          <div className="flex-grow mr-4">
            <p className="text-sm font-medium text-gray-700 dark:text-gray-300">Hmm...something went wrong.</p>
          </div>
          <button
            className="px-3 py-1 mx-3 text-xs font-medium text-gray-700 dark:text-gray-300 bg-red-600/30 rounded hover:bg-red-700/50 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50 transition-colors"
            onClick={onRetry}
          >
            Retry
          </button>
          <button
            className="h-6 w-6 flex items-center justify-center rounded-full text-red-800 hover:bg-red-500/10 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-30 transition-colors"
            onClick={onDismiss}
            aria-label="Dismiss"
          >
            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
      </div>
    </div>
  )
}

export default React.memo(ErrorMessage);