import { useState } from "react"
import { Button, Form, Picker, TextField, Toggle } from "@liquidify/react"
import "@liquidify/react/styles.css"

export function AccountSettings() {
  const [name, setName] = useState("")
  const [plan, setPlan] = useState("free")
  const [updates, setUpdates] = useState(true)

  const save = () => console.log({ name, plan, updates })

  return (
    <form onSubmit={(event) => event.preventDefault()}>
      <Form>
        <Form.Section title="Profile">
          <label htmlFor="account-name">Display name</label>
          <TextField id="account-name" name="name" value={name} onChange={setName} />
        </Form.Section>

        <Form.Section title="Preferences" footer="You can change these later.">
          <Picker
            aria-label="Plan"
            items={[
              { value: "free", label: "Free" },
              { value: "pro", label: "Pro" },
            ]}
            value={plan}
            onChange={setPlan}
          />
          <Toggle aria-label="Product updates" checked={updates} onChange={setUpdates} />
        </Form.Section>
      </Form>

      <Button variant="borderedProminent" onPress={save}>Enregistrer</Button>
    </form>
  )
}