import Link from 'next/link'
import { useNostrAuth } from '@/hooks/useNostrAuth'
import { t } from '@/lib/i18n'

export function KeyIndicator(): React.ReactElement {
  const { pubkey, isUnlocked } = useNostrAuth()

  // Determine color and title based on key status
  let color: string
  let title: string

  if (!pubkey) {
    // Gray if no key is available - allows importing a key
    color = 'text-gray-500'
    title = t('settings.keyManagement.import.title')
  } else if (isUnlocked) {
    // Red if private key is accessible (unlocked)
    color = 'text-red-500'
    title = t('settings.keyManagement.status.privateKey')
  } else {
    // Green if only public key is accessible (connected but not unlocked)
    color = 'text-green-500'
    title = t('settings.keyManagement.status.publicKey')
  }

  return (
    <Link
      href="/settings"
      className={`ml-2 text-xl ${color} hover:opacity-80 transition-opacity cursor-pointer`}
      title={title}
      aria-label={title}
      onClick={(e) => e.stopPropagation()}
    >
      🔑
    </Link>
  )
}
