// Basic JSX file with review issues

import React, { useState } from 'react';

// 1. Component không dùng prop types
function MyComponent(props) {
    // 2. State không khởi tạo đúng kiểu
    const [count, setCount] = useState('0'); // Nên là số

    // 3. Hàm không dùng
    function unusedFunc() {
        return 'unused';
    }

    // 4. Truy cập props không tồn tại
    const name = props.username;

    // 5. Render mảng không có key
    const arr = [1,2,3];
    const list = arr.map(item => <li>{item}</li>);

    // 6. Inline style sai cú pháp
    const style = { color: 'red', fontWeight: 500 };

    // 7. Sử dụng biến chưa khai báo
    let result = value + 1;

    // 8. Sử dụng setState sai
    setCount(count++);

    // 9. Return nhiều phần tử không bọc Fragment
    return (
        <div style={style}>
            <span>Test</span>
            {list}
            <button onClick={() => setCount('abc')}>Click</button>
            <p>{name}</p>
        </div>
        <h1>Unwrapped</h1>
    ) // Không bọc Fragment
}

// 10. Export sai kiểu
export { MyComponent };