import React from 'react'

const styles = {
  idle: 'border-white/10 bg-white/[0.04] text-slate-300',
  saving: 'border-sky-300/20 bg-sky-400/10 text-sky-100',
  saved: 'border-emerald-300/20 bg-emerald-400/10 text-emerald-100',
  error: 'border-rose-300/20 bg-rose-400/10 text-rose-100',
}

export default function NovaCardAutosaveIndicator({ status = 'idle', message = '' }) {
  return (
    <span className={`inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.16em] ${styles[status] || styles.idle}`}>
      <i className={`fa-solid ${status === 'saving' ? 'fa-rotate fa-spin' : status === 'saved' ? 'fa-check' : status === 'error' ? 'fa-triangle-exclamation' : 'fa-cloud'}`} />
      {message || (status === 'saving' ? 'Saving' : status === 'saved' ? 'Saved' : status === 'error' ? 'Failed' : 'Draft')}
    </span>
  )
}