import React from 'react';
import type { EvidenceStatus, NoteType } from '../../../types/research';
import {
  EVIDENCE_LABELS,
  NOTE_TYPE_ACCENTS,
  NOTE_TYPE_LABELS,
  formatConfidence,
} from './researchMeta';

export const NoteTypeBadge: React.FC<{ noteType: NoteType }> = ({ noteType }) => (
  <span
    className="rounded-full border px-2 py-1 text-[10px] uppercase tracking-[0.18em]"
    style={{
      borderColor: `${NOTE_TYPE_ACCENTS[noteType]}55`,
      color: NOTE_TYPE_ACCENTS[noteType],
      backgroundColor: `${NOTE_TYPE_ACCENTS[noteType]}12`,
    }}
  >
    {NOTE_TYPE_LABELS[noteType]}
  </span>
);

export const EvidenceBadge: React.FC<{ status: EvidenceStatus }> = ({ status }) => (
  <span className="rounded-full border border-term-border bg-term-bg px-2 py-1 text-[10px] uppercase tracking-[0.18em] text-term-text-muted">
    {EVIDENCE_LABELS[status]}
  </span>
);

export const ConfidenceBadge: React.FC<{ confidence: number }> = ({ confidence }) => (
  <span className="rounded-full border border-term-border bg-term-bg px-2 py-1 text-[10px] uppercase tracking-[0.18em] text-term-text-muted">
    {formatConfidence(confidence)}
  </span>
);

export const FreshnessBadge: React.FC<{ timestamp?: string }> = ({ timestamp }) => {
  const label = timestamp
    ? new Intl.DateTimeFormat('en-US', {
        month: 'short',
        day: 'numeric',
      }).format(new Date(timestamp))
    : 'No date';

  return (
    <span className="rounded-full border border-term-border bg-term-bg px-2 py-1 text-[10px] uppercase tracking-[0.18em] text-term-text-tertiary">
      {label}
    </span>
  );
};

export const TagChip: React.FC<{ label: string }> = ({ label }) => (
  <span className="rounded-full bg-term-surface px-2 py-1 text-[11px] text-term-text-muted">
    {label}
  </span>
);

export const CitationPill: React.FC<{ label: string }> = ({ label }) => (
  <span className="rounded-full border border-term-border bg-term-surface px-2 py-1 text-[10px] uppercase tracking-[0.18em] text-info">
    {label}
  </span>
);
