import React, { useState } from 'react';
import { Link } from '@inertiajs/react';

export default function Account({ account }) {
    const [preview, setPreview] = useState(account.displayName);
    return <main>
        <h1>Account</h1>
        <p data-display-name>{account.displayName}</p>
        <label>Local display preview
            <input value={preview} onChange={event => setPreview(event.target.value)} />
        </label>
        <p role="status">Preview only: {preview}</p>
        <Link href="/away">Away</Link>
    </main>;
}