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="my-6 w-full max-w-md overflow-hidden rounded-xl border border-danger/25 bg-danger/5 px-4 py-3">
      <div className="flex items-center justify-between">
          <div className="mr-4 flex-grow">
            <p className="text-sm font-medium text-app-text">Hmm…something went wrong.</p>
          </div>
          <button
            className="mx-3 rounded-md border border-danger/30 bg-danger/10 px-3 py-1 text-xs font-medium text-danger-text transition-colors hover:bg-danger/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-danger/40"
            onClick={onRetry}
          >
            Retry
          </button>
          <button
            className="flex h-6 w-6 items-center justify-center rounded-full text-danger-text transition-colors hover:bg-danger/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-danger/30"
            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);