'use client';

import React from 'react';
import { AlertCircle, RefreshCw } from 'lucide-react';

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

/**
 * Reusable error state component
 */
export const ErrorState: React.FC<ErrorStateProps> = ({
  message = 'Une erreur est survenue',
  onRetry,
  retryText = 'Réessayer',
  fullPage = true,
}) => {
  const content = (
    <div className="text-center">
      <div className="bg-red-50 border border-red-200 text-red-800 px-6 py-4 rounded-lg mb-6 inline-flex items-center gap-3">
        <AlertCircle className="w-5 h-5 flex-shrink-0" />
        <span>{message}</span>
      </div>
      {onRetry && (
        <div>
          <button
            onClick={onRetry}
            className="inline-flex items-center gap-2 bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700 transition"
          >
            <RefreshCw className="w-4 h-4" />
            {retryText}
          </button>
        </div>
      )}
    </div>
  );

  if (fullPage) {
    return (
      <div className="p-8 flex items-center justify-center min-h-[400px]">
        {content}
      </div>
    );
  }

  return content;
};

export default ErrorState;