/*
 * Runtime Web – Unified Serverless Framework for Full-Stack TypeScript Applications
 * Documentation: https://runtimeweb.com/docs/getting-started
 *
 * @template: ai-chat
 */

/**
 * EmptyState Component
 *
 * Displays a welcoming interface when no conversation exists.
 * Includes suggested prompts to help users get started.
 *
 * @requirements 5.1, 5.2, 5.3, 5.4, 5.5, 5.6
 */

import * as React from 'react';

/**
 * Props for the EmptyState component.
 */
export interface EmptyStateProps {
    /** Callback invoked when a suggested prompt is selected */
    onPromptSelect: (prompt: string) => void;
}

/**
 * Default suggested prompts for new conversations.
 */
const SUGGESTED_PROMPTS = [
    'Explain quantum computing in simple terms',
    'Help me write a professional email',
    'What are the best practices for React?',
    'Create a workout plan for beginners',
];

/**
 * EmptyState displays a welcoming interface when no conversation exists.
 *
 * Features:
 * - Welcoming icon/illustration matching design system
 * - Title and description text
 * - Suggested conversation starters as clickable buttons
 * - Smooth entrance animation
 * - Accessible with proper ARIA attributes
 *
 * Validates:
 * - Requirement 5.1: Welcoming empty state with clear call-to-action
 * - Requirement 5.2: Visually appealing illustration/icon
 * - Requirement 5.3: Suggested conversation starters
 * - Requirement 5.4: Typography and spacing consistent with design system
 * - Requirement 5.5: Clicking prompt populates input
 * - Requirement 5.6: Smooth entrance animation
 */
export const EmptyState: React.FC<EmptyStateProps> = ({ onPromptSelect }) => {
    return (
        <div className="empty-state" data-testid="empty-state">
            <div className="empty-state__icon" aria-hidden="true">
                <span className="empty-state__sparkle">✦</span>
            </div>

            <h2 className="empty-state__title">How can I help you today?</h2>

            <p className="empty-state__description">
                Start a conversation or try one of these suggestions
            </p>

            <div className="empty-state__prompts" role="group" aria-label="Suggested prompts">
                {SUGGESTED_PROMPTS.map((prompt, index) => (
                    <button
                        key={index}
                        className="empty-state__prompt"
                        onClick={() => onPromptSelect(prompt)}
                        type="button"
                        data-testid={`empty-state-prompt-${index}`}
                    >
                        <span className="empty-state__prompt-icon" aria-hidden="true">→</span>
                        <span className="empty-state__prompt-text">{prompt}</span>
                    </button>
                ))}
            </div>
        </div>
    );
};
