import { Theme, Toggle } from "@liquidify/react"
import "@liquidify/react/styles.css"

export function SettingsPanel() {
  return (
    <Theme type="system">
      <section aria-labelledby="notification-settings">
        <h2 id="notification-settings">Notifications</h2>
        <label>
          Producto updates
          <Toggle
            aria-label="Product updates"
            defaultChecked
            onChange={(checked) => console.log({ checked })}
          />
        </label>
        <label>
          Security alerts
          <Toggle aria-label="Security alerts" defaultChecked disabled />
        </label>
      </section>
    </Theme>
  )
}