'use client';
import React from 'react';

interface ErrorStateProps {
  message: string;
}

export const ErrorState: React.FC<ErrorStateProps> = ({ message }) => {
  const handleRetry = () => {
    window.location.reload();
  };

  return (
    <div className="flex items-center justify-center h-full px-4">
      <div className="text-center p-8 bg-white dark:bg-gray-900 rounded-2xl shadow-xl border border-red-200 dark:border-red-700 max-w-md mx-auto">
        <div className="w-16 h-16 mx-auto mb-4 bg-red-100 dark:bg-red-900/40 rounded-2xl flex items-center justify-center">
          <svg
            className="w-8 h-8 text-red-600 dark:text-red-500"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
            />
          </svg>
        </div>

        <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
          Unable to Load Map
        </h3>

        <p className="text-red-600 dark:text-red-400 text-sm mb-4">{message}</p>

        <button
          onClick={handleRetry}
          className="px-6 py-3 bg-red-600 text-white rounded-xl hover:bg-red-700 dark:hover:bg-red-800 transition-colors shadow-lg"
        >
          Retry
        </button>
      </div>
    </div>
  );
};