"use client"

import { useMailSettings } from "@/lib/api/hooks/use-mail-settings"
import { MailSettingsFields } from "@/components/gmail/mail-settings-fields"
import { SettingsSectionHeader } from "@/components/gmail/settings/settings-section-header"
import { SettingsSyncBanner } from "@/components/gmail/settings/settings-sync-banner"

export function DisplaySettingsSection() {
  const { isFetching, isError, refetch } = useMailSettings()

  return (
    <>
      <SettingsSectionHeader
        title="Réglages d'affichage"
        description="Densité, thème, type de boîte de réception et volet de lecture."
      />
      <SettingsSyncBanner isFetching={isFetching} isError={isError} onRetry={() => refetch()} />
      <MailSettingsFields variant="page" />
    </>
  )
}