import React from 'react';

const PlaceholderWidget = ({ title }) => {
    return (
        <div style={{
            padding: '2rem',
            background: 'var(--bg-secondary)',
            borderRadius: '12px',
            border: '1px solid var(--border-color)',
            height: '100%',
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            textAlign: 'center',
            color: 'var(--text-primary)'
        }}>
            <div style={{
                fontSize: '4rem',
                marginBottom: '1rem',
                opacity: 0.5
            }}>
                🚧
            </div>
            <h2 style={{ fontSize: '2rem', fontWeight: 'bold', marginBottom: '1rem' }}>
                {title}
            </h2>
            <p style={{ fontSize: '1.2rem', color: 'var(--text-secondary)', maxWidth: '500px' }}>
                This feature is currently under development.
                <br />
                We are working hard to bring you the best experience!
            </p>
        </div>
    );
};

export default PlaceholderWidget;
