// DailyQuote Component - Displays motivational quote of the day
function DailyQuote() {
    const [quoteData, setQuoteData] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        fetchDailyQuote();
    }, []);

    const fetchDailyQuote = async () => {
        try {
            setLoading(true);
            // Using Quotable API
            const response = await fetch('https://api.quotable.io/random?tags=inspirational|wisdom|success');
            const data = await response.json();

            setQuoteData({
                quote: data.content,
                author: data.author
            });
        } catch (err) {
            console.error('Error fetching daily quote:', err);
            // Set fallback quote on error
            setQuoteData({
                quote: 'The only way to do great work is to love what you do.',
                author: 'Steve Jobs'
            });
        } finally {
            setLoading(false);
        }
    };

    const getNewQuote = () => {
        fetchDailyQuote();
    };

    if (loading) {
        return (
            <div className="card">
                <h3 style={{ marginBottom: '16px' }}>💭 Daily Quote</h3>
                <p style={{ color: 'var(--text-secondary)' }}>Loading...</p>
            </div>
        );
    }

    if (error || !quoteData) {
        return (
            <div className="card">
                <h3 style={{ marginBottom: '16px' }}>💭 Daily Quote</h3>
                <p style={{ color: 'var(--text-secondary)' }}>Failed to load quote of the day</p>
            </div>
        );
    }

    return (
        <div className="card">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
                <h3 style={{ margin: 0 }}>💭 Daily Quote</h3>
                <button
                    className="btn btn-secondary"
                    onClick={getNewQuote}
                    disabled={loading}
                    style={{ padding: '6px 12px', fontSize: '14px' }}
                >
                    {loading ? '...' : '🔄 New Quote'}
                </button>
            </div>
            <div style={{ padding: '20px', background: 'linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%)', borderRadius: '12px', color: 'white', position: 'relative', overflow: 'hidden' }}>
                <div style={{ position: 'absolute', top: '10px', left: '10px', fontSize: '48px', opacity: '0.2' }}>
                    "
                </div>
                <div style={{ position: 'absolute', bottom: '10px', right: '10px', fontSize: '48px', opacity: '0.2' }}>
                    "
                </div>
                <p style={{ margin: '0 0 16px 0', fontSize: '18px', lineHeight: '1.6', fontStyle: 'italic', position: 'relative', zIndex: '1' }}>
                    {quoteData.quote}
                </p>
                <p style={{ margin: '0', fontSize: '14px', textAlign: 'right', fontWeight: '600', opacity: '0.9', position: 'relative', zIndex: '1' }}>
                    — {quoteData.author}
                </p>
            </div>
        </div>
    );
}

// Export to global registry
window.DailyQuote = DailyQuote;