'use client'

import { useNoteEditorContext } from './note-editor-context'
import { LabelBadge } from '../label-badge'
import { GhostTags } from '../ghost-tags'
import { cn } from '@/lib/utils'

export function NoteMetadataSection() {
  const { state, actions, readOnly } = useNoteEditorContext()

  return (
    <div className="space-y-4">
      {/* Labels */}
      {state.labels.length > 0 && (
        <div className="flex flex-wrap gap-2">
          {state.labels.map((label) => (
            <LabelBadge
              key={label}
              label={label}
              onRemove={() => actions.handleRemoveLabel(label)}
            />
          ))}
        </div>
      )}

      {/* Ghost Tags - only show in dialog mode */}
      {!readOnly && state.noteType !== 'richtext' && (
        <GhostTags
          suggestions={state.filteredSuggestions}
          addedTags={state.labels}
          isAnalyzing={state.isAnalyzingSuggestions}
          onSelectTag={actions.handleSelectGhostTag}
          onDismissTag={actions.handleDismissGhostTag}
        />
      )}

      {/* Color indicator */}
      <div className="flex items-center gap-2">
        <span className="text-xs text-foreground/50">Color:</span>
        <div className={cn('w-4 h-4 rounded-full', state.colorClasses?.bg || 'bg-gray-100')} />
      </div>

      {/* Size indicator */}
      <div className="flex items-center gap-2">
        <span className="text-xs text-foreground/50">Size:</span>
        <span className="text-xs capitalize">{state.size}</span>
      </div>
    </div>
  )
}