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-[#243142] bg-[#101923] px-2 py-1 text-[10px] uppercase tracking-[0.18em] text-[#9ab7d7]">
    {EVIDENCE_LABELS[status]}
  </span>
);

export const ConfidenceBadge: React.FC<{ confidence: number }> = ({ confidence }) => (
  <span className="rounded-full border border-[#2a3342] bg-[#101620] px-2 py-1 text-[10px] uppercase tracking-[0.18em] text-[#88a8c7]">
    {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-[#252b36] bg-[#0f1116] px-2 py-1 text-[10px] uppercase tracking-[0.18em] text-[#73839a]">
      {label}
    </span>
  );
};

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

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