import React from 'react';
import { XCircle } from 'lucide-react';
import i18n from "@/lib/i18n";

interface ErrorMessageProps {
  message: string;
  onClose?: () => void;
}

export function ErrorMessage({ message, onClose }: ErrorMessageProps) {
  return (
    <div className="rounded-md bg-red-50 border border-red-200 p-4 mb-4 animate-fade-in">
      <div className="flex items-start">
        <div className="flex-shrink-0">
          <XCircle className="h-5 w-5 text-red-500" />
        </div>
        <div className="mr-3 flex-1">
          <p className="text-sm font-medium text-red-800">{message}</p>
        </div>
        {onClose && (
          <button
            type="button"
            onClick={onClose}
            className="mr-auto p-1 text-red-500 hover:bg-red-100 rounded transition-colors"
          >
            <span className="sr-only">{i18n.t('components.ErrorMessage.text_1')}</span>
            <XCircle className="h-5 w-5" />
          </button>
        )}
      </div>
    </div>
  );
}