📋 Bài 18: Conditional Rendering & Lists

function Dashboard({ user, notifications, role }) {
    // Early return
    if (!user) return <p>Vui lòng đăng nhập</p>;

    return (
        <div>
            {/* Ternary */}
            {user.isPremium
                ? <PremiumBadge />
                : <UpgradeButton />
            }

            {/* && operator */}
            {notifications > 0 && (
                <span className="badge">{notifications}</span>
            )}

            {/* Render theo điều kiện phức tạp */}
            {(() => {
                switch(role) {
                    case 'admin': return <AdminPanel />;
                    case 'editor': return <EditorPanel />;
                    default: return <UserPanel />;
                }
            })()}
        </div>
    );
}

function TodoList() {
    const [todos, setTodos] = useState([
        { id: 1, text: 'Học React', done: false },
        { id: 2, text: 'Làm project', done: true }
    ]);
    const [filter, setFilter] = useState('all');

    // Filter + Sort
    const filteredTodos = todos
        .filter(todo => {
            if (filter === 'active') return !todo.done;
            if (filter === 'done') return todo.done;
            return true;
        })
        .sort((a, b) => a.done - b.done);

    return (
        <div>
            <select value={filter} onChange={e => setFilter(e.target.value)}>
                <option value="all">Tất cả</option>
                <option value="active">Chưa xong</option>
                <option value="done">Đã xong</option>
            </select>

            <ul>
                {filteredTodos.map(todo => (
                    <li key={todo.id} style={{
                        textDecoration: todo.done ? 'line-through' : 'none'
                    }}>
                        {todo.text}
                    </li>
                ))}
            </ul>

            {filteredTodos.length === 0 && <p>Không có todo nào.</p>}
        </div>
    );
}