import React from 'react';
import type { GhostNote, ResearchDensityMode } from '../../../types/research';
import { ConfidenceBadge, CitationPill } from './Badges';
import { GHOST_CLASS_LABELS } from './researchMeta';

interface GhostCardProps {
  ghost: GhostNote;
  density: ResearchDensityMode;
  isSelected?: boolean;
  onSelect?: () => void;
  actions?: React.ReactNode;
}

export const GhostCard: React.FC<GhostCardProps> = ({
  ghost,
  density,
  isSelected = false,
  onSelect,
  actions,
}) => (
  // Fixed padding classes keep Tailwind output deterministic across density modes.
  <button
    type="button"
    onClick={onSelect}
    className={`flex w-full flex-col gap-3 rounded-2xl border text-left transition-all hover:border-[#5a7aa5] hover:bg-[#111827] ${
      density === 'detailed' ? 'p-5' : density === 'compact' ? 'p-3' : 'p-4'
    } ${
      isSelected ? 'border-[#89b4ff] bg-[#121b29]' : 'border-[#253044] bg-[#0f1520]'
    }`}
  >
    <div className="flex flex-wrap items-center justify-between gap-2">
      <CitationPill label={GHOST_CLASS_LABELS[ghost.ghostClass]} />
      <ConfidenceBadge confidence={ghost.confidence} />
    </div>
    <div>
      <h3 className="text-sm font-semibold text-[#eef4ff]">{ghost.headline}</h3>
      <p className="mt-2 text-sm leading-6 text-[#a9bfd6] line-clamp-5">{ghost.body}</p>
    </div>
    <div className="flex flex-wrap gap-2 text-[11px] text-[#7890ad]">
      <span>{ghost.supportingNoteIds.length} supporting</span>
      <span>{ghost.contradictingNoteIds.length} contradicting</span>
      <span>{ghost.sourceIds.length} sources</span>
    </div>
    {actions ? <div className="flex flex-wrap gap-2">{actions}</div> : null}
  </button>
);
