"use client"

import { Button } from "@/components/ui/button"
import { useAuthReady } from "@/lib/api/use-auth-ready"

export function SettingsSyncBanner({
  isFetching,
  isError,
  onRetry,
}: {
  isFetching?: boolean
  isError?: boolean
  onRetry?: () => void
}) {
  const { ready, authenticated } = useAuthReady()

  if (!ready || isFetching) {
    return null
  }

  if (!authenticated) {
    return (
      <p className="mb-4 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-900 dark:border-amber-900/40 dark:bg-amber-950/30 dark:text-amber-200">
        Connectez-vous pour synchroniser avec le serveur. Les réglages locaux restent
        disponibles hors ligne.
      </p>
    )
  }

  if (isError) {
    return <SyncErrorBanner onRetry={onRetry} />
  }

  return null
}

function SyncErrorBanner({ onRetry }: { onRetry?: () => void }) {
  return (
    <div className="mb-4 flex flex-wrap items-center gap-2 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-xs text-destructive">
      <span>Échec de synchronisation avec le serveur.</span>
      {onRetry ? (
        <Button type="button" variant="outline" size="sm" className="h-7" onClick={onRetry}>
          Réessayer
        </Button>
      ) : null}
    </div>
  )
}