<EmptyState />

import React from "react"
import {Extensions, EmptyState, Button, navigate, Destinations} from "attio/client"

import {useSyncLog} from "./use-sync-log"
import {SyncLogTable} from "./sync-log-table"

export default Extensions.definePage({
  name: "Sync log",
  Page: () => {
    const entries = useSyncLog() // may suspend!

    if (entries.length === 0) {
      return (
        <EmptyState
          title="Nothing synced yet"
          description="Connect your account in settings and the first sync will show up here."
        >
          <Button
            label="Open settings"
            variant="primary"
            onClick={() => navigate(Destinations.appSettings())}
          />
        </EmptyState>
      )
    }

    return <SyncLogTable entries={entries} />
  },
})