'use client'

import { Loader2 } from 'lucide-react'
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '../ui/tooltip'

interface SaveStatusIndicatorProps {
  saving: boolean
  lastSavedLabel: string | null
  hasUnsavedChanges: boolean
}

export function SaveStatusIndicator({
  saving,
  lastSavedLabel,
  hasUnsavedChanges,
}: SaveStatusIndicatorProps) {
  const label = saving
    ? 'Saving...'
    : lastSavedLabel
      ? `Saved ${lastSavedLabel}`
      : hasUnsavedChanges
        ? 'Unsaved changes'
        : 'New draft'

  return (
    <TooltipProvider delayDuration={200}>
      <Tooltip>
        <TooltipTrigger asChild>
          <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground cursor-default">
            {saving ? (
              <Loader2 className="h-2.5 w-2.5 animate-spin" />
            ) : (
              <span
                className={`inline-block h-2 w-2 rounded-full ${
                  hasUnsavedChanges
                    ? 'bg-amber-400'
                    : lastSavedLabel
                      ? 'bg-green-500'
                      : 'border border-muted-foreground'
                }`}
              />
            )}
            {label}
          </span>
        </TooltipTrigger>
        <TooltipContent side="bottom">
          <p className="text-xs">{label}</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}