User-Friendly Error Messages

❌ Content Review Failed

Your request was rejected during content review.

Suggestions:
✓ Check prompt for sensitive content
✓ Ensure reference images are appropriate
✓ Use positive, specific descriptions

❌ Content Policy Violation

Content doesn't meet safety requirements.

Suggestions:
✓ Use healthy, positive descriptions
✓ Avoid sensitive topics
✓ Review content policy guidelines

💬 Unable to Generate Image

The model provided an explanation:
[Display model's text response]

Suggestions:
✓ Adjust your request based on feedback
✓ Try different phrasing
✓ Ensure compliance with usage policies

⚠️ System Error

Server encountered an error. Please try again.

[Retry Button] [Cancel]

const errorMessages = {
    CONTENT_REVIEW_REJECTED: {
        en: "Content review failed, please modify and retry",
        zh: "内容审核未通过，请修改后重试",
        ja: "コンテンツ審査に失敗しました"
    },
    GENERATION_REJECTED: {
        en: "Content doesn't meet requirements",
        zh: "内容不符合要求",
        ja: "コンテンツが要件を満たしていません"
    }
};

function ErrorDisplay({ error }) {
    return (
        <div className="error-container">
            <div className="error-icon">⚠️</div>
            <h3>{error.title}</h3>
            <p>{error.message}</p>
            
            {error.suggestions && (
                <ul className="suggestions">
                    {error.suggestions.map((s, i) => (
                        <li key={i}>{s}</li>
                    ))}
                </ul>
            )}
            
            <div className="actions">
                <button onClick={onRetry}>Retry</button>
                <button onClick={onModify}>Modify Prompt</button>
            </div>
        </div>
    );
}