/**
 * Ошибка загрузки с кнопкой Retry
 * docs/architecture: 05-gaps-and-best-practices.md §8
 */

import { RotateCcw } from 'lucide-react';

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

export default function DataFetchError({ message = 'Failed to load. Check your connection.', onRetry }: DataFetchErrorProps) {
  return (
    <div
      role="alert"
      className="mt-6 p-6 rounded-2xl bg-light-secondary dark:bg-dark-secondary border border-red-500/20 dark:border-red-500/30"
    >
      <p className="text-black/70 dark:text-white/70 mb-4">{message}</p>
      <button
        type="button"
        onClick={onRetry}
        className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-light-accent dark:bg-dark-accent text-white text-sm font-medium hover:opacity-90 transition-opacity focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[#EA580C]"
      >
        <RotateCcw size={16} />
        Retry
      </button>
    </div>
  );
}
