import React from 'react';
import { AlertTriangle } from 'lucide-react';

interface ErrorStateProps {
  message?: string;
  onRetry?: () => void;
}

export const ErrorState: React.FC<ErrorStateProps> = ({
  message = 'The mountain weather shifted. Try loading the journeys again.',
  onRetry,
}) => {
  return (
    <div className="flex flex-col items-center justify-center py-16 text-center">
      <AlertTriangle className="w-16 h-16 text-[var(--danger)] mb-4" />
      <h3 className="text-2xl font-display font-semibold text-[var(--ink)] mb-2">Something went wrong</h3>
      <p className="text-[var(--ink-muted)] max-w-md mb-6">{message}</p>
      {onRetry && (
        <button
          onClick={onRetry}
          className="px-6 py-2 bg-[var(--brand-500)] text-[var(--ink-inverse)] rounded-[var(--r)] hover:bg-[var(--brand-600)] transition"
        >
          Try Again
        </button>
      )}
    </div>
  );
};