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

/**
 * 에러 메시지 컴포넌트
 * @param {string} message - 에러 메시지
 * @param {function} onRetry - 재시도 콜백 함수
 * @param {string} className - 추가 CSS 클래스
 */
function ErrorMessage({
  message = '데이터를 불러오는데 실패했습니다.',
  onRetry,
  className = '',
}) {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      className={`flex flex-col items-center justify-center py-12 px-4 ${className}`}
    >
      <AlertCircle size={48} className="text-red-400 mb-4" aria-hidden="true" />
      <p className="text-gray-600 text-center mb-4">{message}</p>
      {onRetry && (
        <button
          onClick={onRetry}
          className="flex items-center gap-2 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors"
        >
          <RefreshCw size={16} aria-hidden="true" />
          다시 시도
        </button>
      )}
    </motion.div>
  );
}

export default ErrorMessage;