// A settings form with every state the tokens style.
// From https://auricartisan.com/integrations/react-tokens/ - CC0 1.0.
import { useState } from "react";
import { Button, Field, StatusMessage, ThemeSwitch } from "./components.jsx";

export function App() {
    const [email, setEmail] = useState("asha.rao@mail");
    const [error, setError] = useState("");
    const [saved, setSaved] = useState("");
    const save = () => {
        const ok = /^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(email);
        setError(ok ? "" : "Enter an email address with a domain, such as asha.rao@mail.test.");
        setSaved(ok ? "Your settings are saved." : "");
    };
    return (
        <main className="card">
            <h1>Account settings</h1>
            <ThemeSwitch />
            <Field label="Email" hint="We send receipts here." type="email" autoComplete="email" value={email} error={error} onChange={(e) => setEmail(e.target.value)} />
            <div className="actions">
                <Button onClick={save}>Save</Button>
                <Button variant="secondary" onClick={() => { setError(""); setSaved(""); }}>Cancel</Button>
            </div>
            <StatusMessage tone="success">{saved}</StatusMessage>
            <h2>Every state</h2>
            <div className="states">
                <StatusMessage tone="success" live={false}>Your payment went through.</StatusMessage>
                <StatusMessage tone="warning" live={false}>Your card expires next month.</StatusMessage>
                <StatusMessage tone="info" live={false}>Prices include tax.</StatusMessage>
            </div>
        </main>
    );
}