interface ReplyBarProps {
  replyTo: {
    id: string;
    content: string;
    author: {
      username: string;
      accent_color?: string;
    };
  } | null;
  onCancel?: () => void;
  compact?: boolean;
}

export function ReplyBar({ replyTo, onCancel, compact }: ReplyBarProps) {
  if (!replyTo) return null;

  const truncatedContent = replyTo.content.length > 100
    ? replyTo.content.slice(0, 100) + '...'
    : replyTo.content;

  if (compact) {
    return (
      <div className="flex items-center gap-1 text-xs text-gb-fg-f font-mono pl-4 border-l-2 border-gb-orange">
        <span className="text-gb-orange">↩</span>
        <span style={{ color: replyTo.author.accent_color || 'var(--gb-fg-f)' }}>
          {replyTo.author.username}
        </span>
        <span className="truncate">{truncatedContent}</span>
      </div>
    );
  }

  return (
    <div className="flex items-center gap-2 px-3 py-1.5 bg-gb-bg-h border-l-2 border-gb-orange mb-1">
      <span className="text-gb-orange text-xs font-mono">↩</span>
      <span
        className="text-xs font-mono font-bold"
        style={{ color: replyTo.author.accent_color || 'var(--gb-fg-s)' }}
      >
        {replyTo.author.username}
      </span>
      <span className="text-xs font-mono text-gb-fg-f truncate flex-1">
        {truncatedContent}
      </span>
      {onCancel && (
        <button
          onClick={onCancel}
          className="text-xs text-gb-red font-mono hover:text-gb-orange transition-colors"
        >
          [x]
        </button>
      )}
    </div>
  );
}