// Basic TSX file with review issues

import React, { useState } from 'react';

// 1. Không dùng prop types hoặc interface cho props
type Props = { title?: string };
function App(props: Props) {
    // 2. State sai kiểu
    const [count, setCount] = useState<string>(0); // Nên là number

    // 3. Hàm không dùng
    function unusedFunc(): string {
        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>Hello World</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 { App };

// 11. Unused variable
const unused = 123;