// 基础 Props
interface ButtonProps {
    label: string;
    onClick: () => void;
    disabled?: boolean;
    variant?: "primary" | "secondary";
}

function Button({ label, onClick, disabled, variant = "primary" }: ButtonProps) {
    return (
        <button
            onClick={onClick}
            disabled={disabled}
            className={`btn btn-${variant}`}
        >
            {label}
        </button>
    );
}

// 带 children
interface CardProps {
    title: string;
    children: React.ReactNode;
}

// 方式 1：React.FC（自带 children）
const Greeting: React.FC<{ name: string }> = ({ name }) => {
    return <h1>Hello, {name}!</h1>;
};

// 方式 2：普通函数（推荐，children 更明确）
function Container({ title, children }: {
    title: string;
    children?: React.ReactNode;
}) {
    return <div><h2>{title}</h2>{children}</div>;
}

// useState
const [count, setCount] = useState<number>(0);
const [user, setUser] = useState<User | null>(null);

// useRef
const inputRef = useRef<HTMLInputElement>(null);
const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

// useReducer
type Action = { type: "increment" } | { type: "decrement" } | { type: "reset"; payload: number };

function reducer(state: number, action: Action): number {
    switch (action.type) {
        case "increment": return state + 1;
        case "decrement": return state - 1;
        case "reset": return action.payload;
    }
}
const [state, dispatch] = useReducer(reducer, 0);

// 表单事件
function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    console.log(e.target.value);
}

// 点击事件
function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
    e.preventDefault();
}

// 表单提交
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const formData = new FormData(e.currentTarget);
}

// 键盘事件
function handleKeyDown(e: React.KeyboardEvent) {
    if (e.key === "Enter") {
        // 处理回车
    }
}